Date Picker invalid Date Issue

Expected Behavior: The user can enter a date in MM/DD/YYYY format. If the user enters an incomplete date such as MM/DD and then blurs out (moves focus away), the application should: Show an "Invalid date" error message. Allow the user to either: Delete the entered invalid date, or Click on the mdb-datepicker-toggle button to open the datepicker and select a valid date.

Actual Behavior: When the user enters an incomplete date (e.g., MM/DD) and blurs out: The "Invalid date" error appears as expected. But if the user then clicks on the mdb-datepicker-toggle, the datepicker does not open, preventing the user from correcting the date via the UI.

Observation: If the user enters a fully formatted but invalid date (e.g., 22/22/2222), the mdb-datepicker-toggle works, and the user can open the picker.

However, if the input is partially filled (e.g., 22/22 or just 22) and the user clicks the toggle, it throws the following error in the console:

ERROR TypeError: Cannot read properties of undefined (reading 'toLowerCase')

        <mdb-form-control>
            <input mdbInput mdbValidate [mdbDatepicker]="incidentDatePicker" type="text"
                class="form-control form-control-sm" id="incidentDate" formControlName="incidentDate"
                (blur)="checkDateFormatOnBlur($event)" (input)="formatInputDate($event)" maxlength="10"
                autocomplete="off" placeholder="MM/DD/YYYY" />
            <label mdbLabel for="incidentDatepicker"
                class="asterix--before  form-label">{{labels.incidentDate}}</label>
            <mdb-datepicker-toggle [mdbDatepicker]="incidentDatePicker"></mdb-datepicker-toggle>
            <mdb-datepicker [inline]="true" #incidentDatePicker [minDate]="labels.minimumDateToPick"
                [maxDate]="futureDates" format="mm/dd/yyyy"
                (dateChanged)="onDatepickerDateChange($event)"></mdb-datepicker>
        </mdb-form-control>