Prevent the file picker from triggering when a child element has a click event

[jrods]

Currently when there are children with onClick events, clicking on those child elements will cause the FileUploader component to open the file picker. Using event.stopPropagation() or event.stopImmediatePropagation() in the child onClick event does not stop the event from triggering.

Example:

<FileUploader {// props}>
  <div onClick={event => {
    event.stopPropagation();
    event.stopImmediatePropagation();
  }}>
    Click me.
  </div>
</FileUploader>

[jeon-ilju]

i have this issue too..

[karolstawowski]

I have tested this issue in my own application - everything seems to be working fine with

onClick={(e) => e.stopPropagation()}

placed on the child component of FileUploader - the file picker does not show up.

[plomatteo]

i have this issue too

[sandy-ding]

I bind on MouseDown event and it worked!

[XpTo2k]

For the ones that onClick={(e) => e.stopPropagation()} doesn't work, try onClickCapture={(e) => e.stopPropagation()}.
For more info check this article: event-propagation-event-bubbling-event-catching-beginners-guide..