1

I am trying to add an event listener to an icon in my React app, so that I can fire a function upon click of the icon specifically (a click on the surrounding TextField will not suffice). I need to do this manually, because there is no click property on the fluentui-react element.

So far, while I can see based on my console.log that the correct DOM element has been selected, when I click the icon, nothing happens.

I am handling this in componentDidUpdate(), like so:

  componentDidUpdate() {
    const node = ReactDOM.findDOMNode(this);
    if (this.props.sessionsWithNotes.length) {
      if (node instanceof HTMLElement) {
        const child = node.querySelector('i');
        console.log('child: ', child); // I see this in the console
        child.addEventListener('click', () => console.log("Clear icon clicked!")); // This does not print to the console upon click of the icon
      }
    }
  }

To be clear, the child that I am logging to the console shows this:

<i data-icon-name="clear" aria-hidden="true" class="icon-167"></i>

So that is the correct icon element. However, when I click on it after I see that show up in the console, nothing happens - i.e., my console.log of "Clear icon clicked!" doesn't get printed to the console.

Note, the relevant JSX block, that makes use of react-fluent-ui, looks like this:

  <TextField
    label="ID:"
    defaultValue={this.props.filters.id}
    onChange={this.onFilterById}
    styles={{ root: { maxWidth: 300 } }}
    borderless
    underlined
    iconProps={iconProps}
  />

And iconProps looks like this:

const iconProps = {
  iconName: 'clear',
  cursor: 'pointer',
};

What am I missing here?

Muirik
  • 6,049
  • 7
  • 58
  • 116
  • Can I ask why you cannot access the element directly? share full detail of the component, please. – b3hr4d Jan 21 '21 at 15:34
  • There is no `click` property on `iconProps` as defined by `fluentui-react`, and the click event needs to be on the icon itself, not on the `TextField` it is a part of. So I need to define it manually. If I'm misunderstanding you, please let me know. – Muirik Jan 21 '21 at 15:36
  • this is so weird, I should take look at docs! – b3hr4d Jan 21 '21 at 15:39
  • I have, as have others. There is no `click` property on `iconProps` when it is included within a `TextField`. – Muirik Jan 21 '21 at 15:40
  • I did make codesandbox for the test, is your `cursor: 'pointer'` works? – b3hr4d Jan 21 '21 at 15:54

1 Answers1

2

Seems like they disabled the pointer-events for icon under TextField

https://github.com/microsoft/fluentui/blob/master/packages/react-internal/src/components/TextField/TextField.styles.tsx

i assume you can override this behavior by providing inline style to iconProps with pointer-events set to 'auto' and then just pass onClick as you normally would, it would look like this:

<TextField iconProps={style: {pointerEvents: 'auto'}, onClick: () => {..}} />
Eyal Douwma
  • 59
  • 2
  • So is that a way to access the click event directly, nice. I told you it's so weird! – b3hr4d Jan 21 '21 at 16:12
  • @b3hr4d, I guess it works because you're overriding the default behavior of `iconProps`. They could have defined a `click` on it by default, but they don't. But you can override the default props by doing what @Eyal suggests above. – Muirik Jan 21 '21 at 16:14
  • Thanks to Eyal and Muirik I learned something new today. but I think another way can be Split as mention here https://developer.microsoft.com/en-us/fluentui#/controls/web/button – b3hr4d Jan 21 '21 at 16:19
  • @b3hr4d, would a `split` button work when the left side is an input field, though - as is the case here? I have my doubts. I think a `split` is meant for a button with two different `click` events. – Muirik Jan 21 '21 at 16:25
  • Final solution, with the desired pointer style applied: ` iconProps={{ style: { pointerEvents: 'auto', cursor: 'pointer' }, iconName: 'clear', onClick: () => { this.clearTextField() }}}` – Muirik Jan 21 '21 at 16:42