Hi, I am trying to use latest ionic v6 with angular material v13 (latest and greatest for everything ). 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…
Thanks!!