3

Using component, can I specify a separate onClick handler for a decoration icon?

The code below is not working:

  <TextField
    {...passwordTextFieldProps}
    iconProps={{ iconName: 'RedEye', onClick: () => this.setState({ some new state }) }}
  />
Andrej Kirejeŭ
  • 5,381
  • 2
  • 26
  • 31

2 Answers2

5

Two years after the author of this post I had the same question and found a better solution.

The onClick event is available on the icon but is disable by default (pointerEvents is set to none).

With some styling it works (also I added a cursor shape so the icon looks "clickable" but it's optional).

<TextField iconProps={{ iconName: 'RedEye', style: { pointerEvents: "auto", cursor: "pointer" }, onClick: () => { ... } }} />
Sebdej
  • 318
  • 2
  • 8
2

One option to consider would be to render an icon separately: 

<div style={{display:'flex', alignItems: 'center'}}>
    <TextField  />
    <Icon iconName="RedEye"  style={{left:'-25px',position:'relative'}} onClick={()=> console.log("Clicked")}  />
</div>

Demo

Vadim Gremyachev
  • 57,952
  • 20
  • 129
  • 193
  • I see, but considering we already have an Icon and passing some props to it would be convenient to be able to set also and onClick handler. – Andrej Kirejeŭ Dec 01 '18 at 02:50