Calendar is not opening on tabbing when used with reactive angular Form


I’m trying to use the Calendar directive with angular form.

<input type="text" id="departureDate" formControlName="departureDate" placeholder="Tue, 05 Nov 2019"[mbsc-options]="calendarSetting" mbsc-calendar/>

calendarSetting = {
dateFormat: ‘D, d M yy’,
display: ‘center’,
weekDays: ‘short’,
buttons: [‘set’, ‘cancel’],
theme: ‘WN’,
showOnFocus: true,

However the date-picker opens on desktop, only when clicked on the input element. Its not opening when tabbed through the form. Even on clicking the space button, on the input field, component is not opening. How to make component open when focused on input field.

Works perfectly with ngmodel. How to make it work with FormControlName ?

mobiscroll version - 4.8.4

Welcome @Anu_Pai to the Mobiscroll Forum!

Can you share a few more details on the usage? So far I could not reproduce this. Is this an angular or ionic project you are working on? (please provide versions too)


It’s an angular application.

Also everytime i click on the input box, I get this warning message in chrome browser’s console.

the way i’m using thies calendar component is as directive. Not as <mbsc-calendar> component. Unfortunately, i’m not able to remove the formcontrolname for the input element. Here some more details of formgroup i’m using. If that explains.

contactUsForm = new TypedFormGroup({
departureDate: new TypedFormControl<string>(''),
class TypedFormGroup<
    T extends { [key: string]: AbstractControl }
> extends FormGroup {
controls: T;
        controls: T,
        validator?: ValidatorFn | null | undefined,
        asyncValidator?: AsyncValidatorFn | null | undefined,
    ) {
        super(controls, validator, asyncValidator);

These warnings appear because this type of event listener can potentially cause performance issues - but this doesn’t mean that they are. In our case we cannot use passive event listeners, because we’re conditionally prevent page scroll, and this cannot be done with passive event listeners.

I also can’t see anything wrong with the TypedFormGroup class from the example you shared. Can you elaborate a bit on what you mean, when you say, you can’t remove the formControlName from the input?
Since I can’t reproduce the issue, could you send me a simple example where this can be reproduced?


So when i remove formControlName attribute from input field, then the calendar pops up as expected on tabbing through the field.

This works

            placeholder="Tue, 05 Nov 2019"

this does not

            placeholder="Tue, 05 Nov 2019"

I will try to share the link where this issue can be reproducible.


This issue has been resolved. Was facing the issue as there were 2 input fields with same Id and formcontrolName, as part of my app’s functionality. Changing the id and formcontrolname to be unique helped to fix the problem.

Thanks for looking at this issue and helping out.