react-component / trigger

Abstract React Trigger
http://react-component.github.io/trigger/
MIT License
364 stars 226 forks source link

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

Open Ke1sy opened 11 months ago

Ke1sy commented 11 months ago

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 (antd@5.6.3). 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

mellis481 commented 2 weeks ago

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

afc163 commented 2 weeks ago

@linxianxi Could you look into this one?

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

mellis481 commented 4 days ago

@linxianxi Can you please look at this issue?

linxianxi commented 4 days ago

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