Clearable icon isn't clickable on Dropdown with search, clearable, and inline

[AlexCourt]

Bug Report

Steps

Dropdown properties search & clearable appear to be conflicting when combined with inline, so that the search rendered in front of the clear icon, making it impossible to click.

Create a dropdown with the following properties:

      <Dropdown
        options={test_options}
        search
        inline
        clearable
      />

Make a selection, then try to clear the selection by clicking the 'clearable' icon.

Expected Result

when 'clearable' is set as a property the icon can be clicked to clear the dropdown.

Actual Result

Clicking the clearable icon opens the dropdown, and activates the search, instead of just clearing the value. It appears to be being rendered behind the click-target for search instead of in front of it.

Version

semantic-ui-react: 2.0.3 semantic-ui-less: 2.4.1

Testcase

https://codesandbox.io/s/semantic-ui-react-dropdown-clearable-p0r6y?file=/index.js

Workaround

In a pinch: in a custom theme file:
custom-theme>site>modules>dropdown.overrides Adding the following to the dropdown.overrides file gets things into the correct order.

.ui.dropdown > .clear.dropdown.icon {
    z-index: 2;
}

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[cperezcapote]

@AlexCourt I think this issue should be added to the original Semantic-UI repository. In my opinion this should be solved at CSS level, and that is all managed in there.