trigger icon indicating copy to clipboard operation
trigger copied to clipboard

@rc-component/trigger doesn't work with portals

Open Ke1sy opened this issue 1 year ago • 5 comments

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. image

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

Ke1sy avatar Oct 20 '23 12:10 Ke1sy

@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.

mellis481 avatar Sep 03 '24 14:09 mellis481

@linxianxi Could you look into this one?

https://github.com/react-component/trigger/pull/412

afc163 avatar Sep 03 '24 14:09 afc163

@linxianxi Can you please look at this issue?

mellis481 avatar Sep 18 '24 12:09 mellis481

I have not used react-select and do not understand how it is implemented.

linxianxi avatar Sep 19 '24 01:09 linxianxi

@linxianxi I created another example using ReactDOM.createPortal that follows the logic that implemented in react-select. image Steps to reproduce:

  1. Open filter.
  2. 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

Ke1sy avatar Sep 25 '24 07:09 Ke1sy

@linxianxi Did you have a chance to look at this problem?

mellis481 avatar Oct 03 '24 14:10 mellis481