react-component
generateTrigger在多层shadow元素中使用的异常
在webComponent自定义元素a的shadow dom里面使用TimePicker组件，把这个自定义元素a放到另外一个webComponent自定元素b的shadow dom中,TimePicker组件无法选中时间，打开时间选择弹窗，第一次点击一个时间，弹窗不会关闭，这是正常的第二次点击时间，会自动关闭时间选择框。
排除后发现是依赖的这个项目的问题，useWinClick函数里面，win.addEventListener('mousedown', onTriggerClose, true)这里，在a元素里面的Popup组件打开的时候，点击Popup组件里面的某个元素，onTriggerClose函数执行参数的e.target是最外层的定义元素b，inPopupOrChild函数判断到这个b元素不是元素a或者元素a里面的内容，就把使用的Popup组件给关闭了。
复现链接https://codesandbox.io/p/sandbox/bold-tristan-pf2fhw?file=%2Findex.tsx%3A64%2C24
This is blocking us very hard as well. This is not only Datepicker but all Dropdowns popovers etc. Second click closes the portal.
@zombieJ You attention is needed plz
popupEle?.contains(composedPathTargetList?.[0] as Node)
The inPopupOrChild must also check if there is a composed path in the event and check if the composedTarget (the actual clicked element inside the child shadow) is clicked.
const inPopupOrChild = useEvent(
(ele: any, composedPathTargetList: EventTarget[]) => {
//ele in my webcomponent shadowDom case is the re-targeted webcomponent element
//composedPathTargetList?.[0] is the actual element the user clicked
const childDOM = targetEle;
return (
...
popupEle?.contains(composedPathTargetList?.[0] as Node)
);
},
);
The e.composedPathTargetList is taken from the implementation in #463 PR useWinClick.ts
export default function useWinClick(
//...
inPopupOrChild: (target: EventTarget,composedPathTargetList:EventTarget[]) => boolean,
) {
...
const onTriggerClose = (e: MouseEvent) => {
if (openRef.current && !inPopupOrChild(e.target,e.composedPath())) {
triggerOpen(false);
}
};
I did not want to make a PR here as i think this probably needs some testing and someone with a better overview, but rather use the examples as a mean to find the problem in combination with @gdutzhendong ´s PR
