In Semantic-UI-React, is there a way to add an x icon to a text input or dropdown that will clear the text when clicked?

Question

I have both a text input and a dropdown that allows additions (both use the Form.xxx version). For both of these, I would like to add an x icon on the right, that when clicked, will either call a handler or will clear the input's value.

Is this possible in semantic-ui-react?

Thank you

Answer 1

I did find a solution, which I will share, but this means I can no longer have my lock icon on the left hand side, because an input can only have one icon.

What I've done is to use an Icon element, and add an onClick handler to that, as follows:

<Input ...
  icon={<Icon name='delete' link onClick={this.handleDeleteClick}/>}/>