My issue is on Mobile part. I have the Birthday date field on my Register Aura component and its using ui:inputDate tag. The client wants to redisplay the placeholder immediately when the date field is empty due to reset/clearing of selected date. Now, I already have a function that can add a placeholder as soon as the date field loses its focus. So I just wanna detect if the date field is empty so I can lose its focus or redirect the focus to my other elements in order to redisplay the Birthday placeholder. I tried using event listeners but its not really working. So far my handleBirthdayChange on my controller file looked like this below. Please disregard the other codes because its for other functionality:

handleBirthdayChange : function(component, event, helper) {

        var brand = component.get("v.brandParam");
        var currentDate = new Date();
        var dateThirteenYearsAgo = new Date(currentDate.getFullYear() - 14, currentDate.getMonth(), currentDate.getDate());
        var birthdayInput = component.find("birthday2");

        var birthday = new Date(birthdayInput.get("v.value"));
        if (birthday > dateThirteenYearsAgo){
            component.set("v.birthdayErrorMessage", brand == 'garage' ? $A.get("$Label.c.GRG_AgeRangeOverflowMessage"): $A.get("$Label.c.DYN_AgeRangeOverflowMessage"));
            component.set("v.showBirthdayError",true);
        } else {
            component.set("v.showBirthdayError",false);
        }

        // If there's already a date selected, this will remove both english and french css class for birthday placeholder.
        if (birthday != 'Invalid Date') {
            $A.util.addClass(birthdayInput, 'date-selected');
            $A.util.removeClass(birthdayInput, 'en-birthday-placeholder');
            $A.util.removeClass(birthdayInput, 'fr-birthday-placeholder');
        } else {
            $A.util.removeClass(birthdayInput, 'date-selected');
            // Add the appropriate class based on the language
            var placeholderClass = helper.getClassByLanguage(component);
            $A.util.addClass(birthdayInput, placeholderClass);

            // Remove the opposite language class
            helper.removeClassForOppositeLanguage(component);
        }

        var birthdayValue = birthdayInput.get("v.value");

        console.log('BirthdayValue: ', birthdayValue);
        // Check if the birthday value is empty or invalid
        if (!birthdayValue || isNaN(new Date(birthdayValue))) {
            // If the birthday value is empty or invalid, remove focus from the date field
            var submitButton = component.find("sfdc_confirm_button_container");
            submitButton.getElement().focus();
        }
    }

Here’s my birthday date on my cmp file:

<div id="sfdc_birthday_container" class="sfdc dateOption2">
                                    <ui:inputDate aura:id="birthday2" labelClass="" value="{!v.birthdayValue}" blur="{!c.handleBirthdayChange}" displayDatePicker="true" format="{!v.dateFormat}" select="{!c.nullify}" keyup="{!c.nullify}" keypress="{!c.nullify}" updateOn="keypress, keyup" class="input sfdc_usernameinput sfdc" />
                                    <img src="{!$Resource.BirthdayDatePickerIcon}" alt="Date Picker Icon" class="sfdc-datepicker-icon"/>
                                </div>

I tried using event listeners and MutationObserver function but all of them aren’t working at all.