How to fix the filterinput and place a placeholder?

[Emrinho]

I want to fix the filter input at the top of the listbox. And also add a placeholder. What is the best way to do this?

[Arunkumar Devendiran]

Hi Emrinho, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your reported query and we suggest you to by setting the allowFiltering property as true, you can get the filter input on top of the listbox. We would inform you that currently, we does not have placeholder support in our listbox filter. We have considered this, and it will be included in our volume 1 SP1 2020 release and appreciate your patience until then. However, we have provided the workaround solution for to set the placeholder text in listbox filter. In this, we have added the placeholder text to filter input element by using (.e-input-filter) class name in created event. Please refer the below sample link. 

 

Sample Link: 

https://stackblitz.com/edit/4zixfj-icd98e?file=index.ts 

 

Please follow the below feedback link 

https://www.syncfusion.com/feedback/12684/placeholder-support-on-listbox-filter-element 

 

Please get back to us if you need further assistance. 

 

Regards, 

Arunkumar D 

[Emrinho]

Thank you very much for your reply.

I know that the filter input are at the top of the list box. Note that I have a scrollable list box and when I scroll down, the filter input should be fixed at the top.

Also, how can I turn off the auto focus on the filter input. I have noticed that whenever an item is selected, the filter input is focused.  This can be quite annoying when you have large lists and the scroll position is not maintained.

[Emrinho]

Sample Link:

https://stackblitz.com/edit/4zixfj-aema3t

[Arunkumar Devendiran]

Hi Emrinho, 

 

Sorry for the inconvenience caused. 

 

Query1: I know that the filter input are at the top of the list box. Note that I have a scrollable list box and when I scroll down, the filter input should be fixed at the top. 

 

We have checked your reported query and we would inform you that we have considered this as a defect in our end and fix of this issue will be included in our volume 1 SP1 2020 release and appreciate your patience until then.  However, we have provided a workaround solution to achieve your requirement. In that, we have set the height to listbox ul element. In this way, you can achieve your requirement. Please refer the below sample link. 

 

Sample link: 

https://stackblitz.com/edit/4zixfj-q2hnvr?file=index.html 

 

Please follow the below feedback link 

https://www.syncfusion.com/feedback/12719/filter-input-should-be-fixed-at-top-of-the-scrollable-listbox 

 

Query2: Also, how can I turn off the auto focus on the filter input. I have noticed that whenever an item is selected, the filter input is focused.  This can be quite annoying when you have large lists and the scroll position is not maintained. 

 

We would inform you that we have considered this defect in our end and fix of this issue will be included in our volume 1 2020 release which will be available on end of the march 2020. 

 

Please get back to us if you need further assistance. 

 

Regards, 

Arunkumar D