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?

semantic-ui-react
mdebeus picture mdebeus · Mar 2, 2018 · Viewed 8.1k times · Source

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

mdebeus picture mdebeus · Mar 5, 2018

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

Related questions

Form Validation with Semantic-UI-React

I am using the official Semantic UI React components to create a web application. I have a form on my sign up page, which contains an email field, a password field, and a confirm password field. import {Component} from 'react'; …

Read More
Semantic UI (React): How to use Link components in Menu.List elements

I'm trying to get a semantic ui (react) menu list, which should be working with react router, which means I would like to use the Link component of react router If I use this... <Menu.Item name='profile'> &…

Read More
Converting Object Promise to String in Javascript

I'm working with React, Next.Js, semantic-ui-react and Solidity. It is my goal to print out the users address (from MetaMask) and a ProjectTitle (set by User) as meta infomation for a semantic-ui-react card. To print out the address in …

Read More