1. Home
  2. Forum
  3. Angular - EJ 2
  4. Issue with searching/filtering in dropdown list component when i am using this component with @ncstate/sat-popover

Issue with searching/filtering in dropdown list component when i am using this component with @ncstate/sat-popover

Hi,
I am using dropdown list component with sat popover,but i am not able filter the the options in dropdown and i am able to see the text in input search box.

Please check video recording for this bug
https://www.loom.com/share/9feca034e4264821bc593b64e9a16525
and also code snippet here
https://stackblitz.com/edit/angular-djcj59?file=src%2Fapp.component.html,src%2Fapp%2Fapp.module.ts

Thank you



5 Replies
SP Sureshkumar P Syncfusion Team February 2, 2023 12:02 PM UTC

Hi Goutham,

This is not an issue from our component. when we validate with another input element on the same dialog the focus moved to the first input when clicking the dropdownlist component. is there any reason you have used the @ncstate/sat-popover because we have our own dialog element to achieve your requirement

Modified validated provided sample with input component: https://stackblitz.com/edit/angular-djcj59-v3ofbn?file=src%2Fapp.component.html

To know more about the dialog component, refer to the below documentation and demo pages.

Demo page: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/dialog/template

documentation page: https://helpej2.syncfusion.com/angular/documentation/dialog/getting-started

Regards,

Sureshkumar P


GO Goutham February 2, 2023 01:52 PM UTC

Hi,
i have replaced the way you suggested,i have removed third party popover,used syncfusion dialog.
But i have faced other issue with ejs-toolbar in overflowMode "Popup".It is not working as expected.


Please check video recording here
https://www.loom.com/share/6a3dff2d99904112968e7ca129a654a2

and code
https://stackblitz.com/edit/angular-pwwask?file=src%2Fapp.component.html,src%2Fapp%2Fapp.module.ts,src%2Fapp.component.ts

Thank you.


SP Sureshkumar P Syncfusion Team February 3, 2023 11:30 AM UTC

Goutham, your query has been forwarded to the concerned team and branched as a new forum, please follow up using the link below,

Forum Link: https://www.syncfusion.com/forums/180340/ejs-toolbar-in-overflowmode-popup-from-180286

We are marking this as solved


RL Ricardo Lima November 7, 2024 10:00 PM UTC

Hello, I have the same issue
I cant search on dropdown when I'm on a modal, in my case using ionic framework + Angular.

Thanks


UD UdhayaKumar Duraisamy Syncfusion Team November 8, 2024 10:34 AM UTC

This issue arises because the ion-modal component enforces focus on itself whenever an element outside the ion-modal (such as a Dropdown popup rendered as a child of the body element) receives focus. Consequently, when entering characters in the filter input of the popup, ion-modal loses focus and forces focus back within itself. This behavior is specific to ion-modal rather than an issue with the DropdownList component.
To address this, you can set the focusTrap property of ion-modal to false, allowing it to permit focus outside its wrapper. Please refer to the documentation and code snippet below for more information:
<ion-modal trigger="open-modal" (willDismiss)="onWillDismiss($event)" [focusTrap]="false">






Loader.
Up arrow icon