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

[Ke1sy]

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 854325f.

CC: @mellis481

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

[afc163]

@linxianxi Could you look into this one?

#412

[mellis481]

@linxianxi Can you please look at this issue?

[linxianxi]

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

[Ke1sy]

@linxianxi
I created another example using ReactDOM.createPortal that follows the logic that implemented in react-select.

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

[mellis481]

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

[mellis481]

@afc163 What would you like to do with this issue? It doesn't seem like the person who created the PR that caused this regression is willing to address it.

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]

I think this behavior is expected
You can try mui, which is the same as antd. Both antd's Select and mui's Select work properly. https://codesandbox.io/p/sandbox/bold-fire-vgpqq7?file=%2Fsrc%2FDemo.tsx%3A50%2C16

[Ke1sy]

@linxianxi MUI is implemented in different way, there is a MuiBackdrop-root (fixed div) over the content with fixed position, that prevents the content of react-select menu to be reached. We can see that react-select menu is not focusable/hoverable and the event doesn't reach the select menu on click. rc-trigger doesn't use such mask (like MuiBackdrop) and allow the event to reach the select

To allow the event reach the react-select in MUI, I set the height of mask to 200px.
The result: the event reaches the react-select, the dropdown is not closed after click.

select.mp4

[mellis481]

@linxianxi Can you please address @Ke1sy's comment?

[mellis481]

@afc163 What would you like to do with this issue? It doesn't seem like the person who created the PR that caused this regression is willing to address it.

[zombieJ]

react-select called stopPropagation() to prevent outter get mouseDown event. So in prev version of trigger will be blocked by react-select.

For current version, to resolve the case when outer use stopPropagation() which makes trigger not get mouseDown event and can not close so it use capture to get the event. Which hit the way of react-select escape. Since the fix logic can not check stopPropagation is really want to not close, I guess it's not easy to fix.

[zombieJ]

+ @rc-component/[email protected]

https://codesandbox.io/p/sandbox/filter-and-sorter-antd-5-10-0-forked-m346tn?file=%2Fpackage.json%3A15%2C23