Search input does not work when used inside a modal

[hatsantos]

Hello,

I'm using ng-select2 on a Ionic/Angular application.

When using on a modal, the search input from the is not working.

I created a simple stackblitz, reacreating this issue to help identify the issue. In the example below there's two components, one inside the modal and other outside the modal. The one inside de modal does not allow the search.

Editor URL: https://stackblitz.com/edit/ionic6-angular13-xuza7h?file=src%2Fapp%2Fapp.component.html

Application URL: https://ionic6-angular13-xuza7h.stackblitz.io

[dadoadk]

Try using: [customSearchEnabled]="true" (search)="mysearchfunction($event)"

[hatsantos]

Hello @dadoadk , thank you for the sugestion.

I added that @Input() customSearchEnabled but it seems to have no effect.

I updated the stackblitz example and the behaviour is the same. Search seems "disabled" when used inside de modal.

[Zefling]

It has been simplified in the latest version.

[hatsantos]

I have updated the stackblitz to the latest version (13.0). The problem still exists with this version.

The search input seems disabled and can't get focus.

[Zefling]

I see the problem. But I don't know if I'll be able to fix it or if anyone has a solution that might help fix the problem.

When an ionic modal is opened, it is no longer possible to set the focus in the container created by Angular/cdk. And that, I don't really know how to prevent it, since that's how the Ionic modal works.

The only solution I found is to not use the overlay in an Ionic modal.

https://stackblitz.com/edit/ionic6-angular13-dut831?file=src%2Fapp%2Fapp.component.html