trigger
trigger copied to clipboard
@rc-component/trigger doesn't work with portals
After update from v1.14.2 to v1.14.3 I noticed that @rc-component/trigger doesn't work good with portals as previously.
We use the react-select with portal inside the antd Table filter dropdown ([email protected]). Filter dropdown has the search value as well as "Filter" and "Clear" buttons.
To apply the filter user should select option and type search value and click "Filter". But we faced the issues with select (react-select) that uses portals after @rc-component/trigger was updated to v1.14.3 or higher.
Expected behaviour: After selecting the option, the dropdown is not closed and user can continue set up the filter.
Codesandbox with v1.14.2: https://codesandbox.io/s/filter-and-sorter-antd-5-10-0-forked-lygdxm?file=/demo.tsx
Actual behaviour: After selecting the option, the dropdown is closed and user cannot continue set up the filter.
Codesandbox with v1.14.3: https://codesandbox.io/s/filter-and-sorter-antd-5-10-0-forked-q6h9s9?file=/demo.tsx
We believe that this issue is caused by these changes https://github.com/react-component/trigger/commit/854325fe8a25436f6ef127674c16e91f9deb3797.
CC: @mellis481
@afc163 @zombieJ @MadCcc Can you please take a look at this issue and advise what you'd like to be done? To summarize, PR #412 (specifically the enabling of capture mode for the mousedown
event handler - https://github.com/react-component/trigger/blob/master/src/hooks/useWinClick.ts#L33) has broken Ant Design Table
instances using the filterDropdown
prop when using portals.
@linxianxi Could you look into this one?
https://github.com/react-component/trigger/pull/412
@linxianxi Can you please look at this issue?
I have not used react-select and do not understand how it is implemented.
@linxianxi
I created another example using ReactDOM.createPortal
that follows the logic that implemented in react-select.
Steps to reproduce:
- Open filter.
- Click on Portalled Menu (html and styles are hardcoded here, but in a real example it is a select list that allows to select the value). In v1.14.2 after we click on portalled menu the filter doesn't close ( https://codesandbox.io/p/sandbox/filter-and-sorter-antd-5-10-0-forked-9w6zz7 ). While in v1.14.3 the filter closes. ( https://codesandbox.io/p/sandbox/filter-and-sorter-antd-5-10-0-forked-qq4njt ) CC: @mellis481 @afc163
@linxianxi Did you have a chance to look at this problem?