Clear Icon Behavior

[Ryan Schuh]

Hello,

Is there a way to get the DropDownList controls clear icon to act like the MutliSelects? I would like the clear icon to show on hover over for the DropDownList (When an item has been selected).

Thanks

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Ryan, 

Greetings from Syncfusion support. 

As per your requirement we have prepared the work around sample with DropDownList component. It has been achieved using mouseover and mouseleave event bound for dropdownlist span element by add and remove the clear-icon-hide class. Please find the code snippet and test sample below for reference. 

public onCreated() { 

    var clearIcon = document.getElementsByClassName('e-clear-icon')[0]; 

    var dropdownlistElement = document.getElementsByClassName('e-input-group e-ddl')[0]; 

    dropdownlistElement.addEventListener('mouseover',function(){ 

      clearIcon.classList.remove('e-clear-icon-hide'); 

    }) 

    dropdownlistElement.addEventListener('mouseleave',function(){ 

      clearIcon.classList.add('e-clear-icon-hide'); 

    }) 

  } 

                                                                        

Sample: https://stackblitz.com/edit/angular-1j867d-faha8k?file=app.component.ts 

Kindly check with the above sample which meets your requirement. Please get back us if you need further assistance. 

Regards, 

Jeyanth.