DropDownListComponent - Show clear button on hover

[alxcode-x]

Is there a way to show the clear button on hover over the DropDownListComponent? the button appears when the dropdown is active, and it works, but once we click anywhere else outside the dropdown, the button doesn't show up on hover. This does happen in the MultiSelectComponent, but I can't found a different property that allows that besides showClearButton.

This is my dropdown configuration:

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';

class FilterInput extends React.PureComponent {
    constructor(props) {
        super(props);
        this.ref = null;
    }

    render() {
        <div>
                <DropDownListComponent
                        name={this.props.id}
                        panelId={this.props.panelid}
                        placeholder={this.props.parameters.placeHolder}
                        change={(args) => this.props.change(this.props, args)}
                        fields={this.props.fields}
                        dataSource={this.props.data}
                        itemTemplate={this.props.itemTemplate}
                        query={this.props.query}
                        width="200px"
                        popupHeight="400px"
                        popupWidth="350px"
                        allowFiltering={this.props.allowFiltering ?? true}
                        showDropDownIcon={true}
                        showClearButton={true}
                        filterType="Contains"
                        className={styles['drop-down']}
                    />
        </div>
    }
}

[Sureshkumar2288]

You are trying to override the default behavior of the component to make the clear icon always visible, even when the popup is open, and the input element has no value. To do this, you can set the cssClass property to e-static-clear.

Find the sample here: https://stackblitz.com/edit/react-jtoynb-d7jybx?file=index.js

[syncsiva]

This issue has been resolved. Please feel free to reopen if you have any further queries.

[alxcode-x]

@Sureshkumar2288 Thanks for your answer. I'm trying to make the icon visible only on hover over the input. I modified your sample to do that. I added onHover and onHoverOut functions linked to onMouseOver and onMouseOut events to change the customStyle state between e-static-clear and an empty string, and then assign this state to the cssClass property.
Sample updated: https://stackblitz.com/edit/react-jtoynb-x1exet?file=index.css,index.js

The sample works, however I'm getting this error in my project:
Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.

Any ideas to fix this error?
Or is there any other way to achieve the behavior of the sample?

[alxcode-x]

Thanks guys. I fixed it.
My functions onHover and onHoverOut was in a parent component, and I was passing the customStyle value via props.
I fixed it making the same implementation but in the component itself, not in the parent.