Facing issues using Angular Material Datepicker in Ionic modal - Ionic v6

Hi, I am trying to use latest ionic v6 with angular material v13 (latest and greatest for everything :slight_smile: ). I have a page where I am using Ionic modal combined with Angular Material datepicker controls where I am facing this weird issue.

I found out that whenever I opens the datepicker (basically anything using overlay, same with the angular material menu), the first input from the ion-modal get focused. After I tested it, it happens for both mat-datepicker and mat-menu.

I am not quite sure whether it is an issue from Angular Material or Ionic. Hope I can get some help here.

I created something on stackblitz. The UI does look weird since somehow I cannot get the style (new stackblitz user…) but it gives the idea. Basically when you click on either mat-datepicker or mat-menu, the first input gets focused in ionic modal behind the scens (note: You will have to expand the window to see the modal and scroll your mouse to see the datepicker, hidden secure feature right there!). Once you are out of focus, the modal will jump back to where the datepicker located because the focus seems come back to the datepicker control.

Here is the link to the Stackblitz: Angular Ivy (forked) - StackBlitz

Not sure how to resolve this issue. Please assist…


I’m having the same issue. Tried a feel things but none worked so I’m just ignoring it for now(no user have complained so far so I’m good haha)

Yeah, it does not harm other than the product manager complains about it :slight_smile:

1 Like