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

score 12 · Accepted Answer · edited Oct 27 '19 at 23:04

12

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}/>}/>

edited Oct 27 '19 at 23:04

jarmod

71,565
16
115
122

answered Mar 05 '18 at 22:44

mdebeus

1,928
3
18
27

I modified the solution as follows: add the delete icon when the input is not empty, set the icon to user/lock/mail/etc when the input is empty. – mdebeus Mar 06 '18 at 21:22
Note: change OnClick to onClick – SandroMarques May 28 '19 at 14:15
Support was supposed to be added for 2 icons in 1 input, but the github thread for it died. – DJ2 Aug 09 '19 at 21:35
@jarmod How does the event handler get the value of the Input? Via state? – rjurney Feb 10 '21 at 18:19
@rjurney I didn’t provide the answer. I simply edited it later to correct a typo. – jarmod Feb 10 '21 at 18:22

morinx · Answer 2 · 2018-03-06T03:16:28.267

2

(Updated) To clear the field, there is no "semantic-ui-react" shortcut as far as I know.

However, you can do this manually using your component state.

Here would be an example of this:

class ExampleClearField extends Component {
  state = {}

  handleChange = (e, { name, value }) => this.setState({ [name]: value })

  handleClear = () => this.setState({ email: ''})

  render() {
    const { email } = this.state

    return (
     <Form.Input iconPosition='left' name="email />
        <Icon name='x' link onClick={this.handleClear} />
        <input/>
     </Form.Input>

    )
  }
 }

** Notice the link, which is needed for Icon to accept onClick.

Also, dont't forget about (you might need to change it's place depending on iconPostion)

edited Mar 06 '18 at 03:16

answered Mar 03 '18 at 02:58

morinx

635
7
19

morinx - thank you for your input, but I was hoping to have the delete button embedded in the input field, instead of to the right of it. Semantic-ui-react does not do a good job with these action buttons - when the focus is set, or the input is set to error, a bounding box is displayed around the input (blue or red or whatever) but the button remains gray, which just doesn't look good. Any other thoughts? – mdebeus Mar 05 '18 at 21:29

score 1 · Answer 3 · answered Nov 16 '18 at 14:20

As of Semantic UI React 0.83.0, it is possible to do this with Dropdowns using clearable. You cannot add your own event handler to the "x" by using this. Clicking the "x" will simply clear the selected value and call onChange with the new empty value.

Example from their docs:

const DropdownExampleClearable = () => <Dropdown clearable options={options} selection />

See the example output on their docs page here

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?

3 Answers3