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

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

3 Replies 1 reply marked as answer

VS Vignesh Srinivasan Syncfusion Team February 9, 2021 07:00 AM UTC

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"; 
  }, 
 
 
 
Please let us know if you need any further assistance. 
 
Regards, 
 
Vignesh Srinivasan. 


Marked as answer

AM Andrew Mandruk February 12, 2021 03:03 PM UTC

Thank you. It helped


PO Prince Oliver Syncfusion Team February 15, 2021 05:05 AM UTC

Hi Andrew, 

Most welcome. We are glad to assist you. 

Regards. 
Prince  


Loader.
Up arrow icon