When click the dropdown arrow in Modal's Form element, such as the Select's dropdown icon, the Modal closed

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.9.2

Environment

macOS 10.13.6 Chrome(Version 68.0.3440.106 (Official Build) (64-bit)), Sarari(Version 12.0 (13606.2.11))

Reproduction link

Steps to reproduce

1. click the Top Up button
2. click the Search Input and then show the SearchTable
3. click Add to show the Add Customer Modal
4. click the Gender Select’s dropdown arrow
5. the Add Customer Modal is closed

What is expected?

show the gender select options, not close the Modal

What is actually happening?

the Modal is closed

Remark

[zombieJ]

rc-select has the logic on arrow click which stopPropagation the click event. This is OK in react life cycle.

But this demo code use addEventListener in document. Check your code on searchTable.js:

componentDidMount() {
  document.addEventListener("click", this.handleListenClick);
}

handleContainerClick(e) {
  e.nativeEvent.stopImmediatePropagation();
}

handleListenClick() {
  this.hideTable();
}

Since in react, the handleContainerClick is stopPropagation by arrow click which is not trigger. The document only get the handleListenClick trigger makes the popup hide.

It’s little tricky to use this code since react currently addEventListener on document (But maybe not in future). The addEventListener in your code is the second listener with document so you can stopImmediatePropagation to prevent what you added listener in the componentDidMount. Also this code has another potential risk like some code really want to handle document click. The better way is move the modal out of SearchTable which only provide the Add button but use some prop function like onAddCustomer to handle this.

[duzliang]

Thanks, it’s a way to solve this issues temporary， by overriding the style of Select in antd

.ant-select-selection--single {
    pointer-events: none;
}