file input ref triggering multiple times

[httpete-ire]

Summary:

When a ref is set on a file input within a modal, triggering the click on the ref from another handler causes the original handler to get called several times (3 in most cases).

Steps to reproduce:

In example below:

1. Open modal
2. Click on Open file dialog button
3. Inspect console to see result
4. Clicking on Open file dialog button on the page will only trigger the handler once

Expected behavior:

onClick is called only once.

Link to example of issue:

example with issue

[httpete-ire]

bump

[diasbruno]

Hi @httpete-ire, this is really weird. You can try to E.stopPropagation() or E.preventDefault() on openFileDialog(E).

[httpete-ire]

@diasbruno Thanks for getting back to me. I have tried these and the issue is still present. Have updated the example to include stopPropagation call.

I'd be happy to try debug the issue if you wouldnt mind pointing me in the right direction

[diasbruno]

Sure. You can follow the paths triggered when open and close the modal. Perhaps, a click event is going from the modal to the file input.

[diasbruno]

@httpete-ire This is a very weird case. If you add a listener on document you'll see that the native event is correct, one for the button and one for the file input. Both synthetic events created by react are related to the button.

document.body.addEventListener('click', function(event) { 
  console.log(event.target);
});

openDialog = (event) => {
  console.log(event.target);
  this.fileInput.click();
}

<input type="file" onClick={event => {
  // here we can stop one of the events.
  event.stopPropagation();
}}

Since both generated events are related to the button it will call openDialog twice.

[diasbruno]

This is the log with this patch https://codesandbox.io/s/819q2j37j0.