Clear button not shown while dropdown is opened if custom filtering is used

[Andrew Mandruk]

Hello

Clear button not shown while dropdown is opened if custom filtering is used

Steps to reproduce:

- go to demo page https://codesandbox.io/s/dropdowntest-vov76?file=/src/App.vue

- select a value in the dropdown

- click one more time on the dropdown to open it 

- see that clear button shows for a second and then disappearing

Actual result: Clear button is not shown while dropdown is opened

Expected result: Clear button available for click while dropdown is opened

Can it be fixed?

Thanks

[Vignesh Srinivasan]

Hi Andrew, 

 

We would like to inform you that, clear icon only appears when input in focus. After set the custom filtering as true, when input is clicked it loss the focus. So, the clear icon was not displayed it is intend behavior of the component.  We set the clear icon display as block in open event to achieve your requirement pleas find the code below. 

 

Code snippet: 

 

 

<ejs-dropdownlist 

id="dropdownlist" 

placeholder="Select a country" 

:allowFiltering="allowFiltering" 

:filtering="filtering" 

:showClearButton="true" 

:dataSource="dataSource" 

:fields="fields" 

:open="isOpen" 

:close="onClose" 

></ejs-dropdownlist> 

 

  isOpen: function () { 

    document.getElementsByClassName("e-clear-icon")[0].style.display = 

      "block"; 

  }, 

  onClose: function () { 

    document.getElementsByClassName("e-clear-icon")[0].style.display = "none"; 

  }, 

 

 

Sample: https://codesandbox.io/s/dropdowntest-forked-bxdhz?file=/src/App.vue 

 

Please let us know if you need any further assistance. 

 

Regards, 

 

Vignesh Srinivasan. 

[Andrew Mandruk]

Thank you. It helped

[Prince Oliver]

Hi Andrew, 

Most welcome. We are glad to assist you. 

Regards. 

Prince