generateTrigger在多层shadow元素中使用的异常 #463

Activity

1. gdutzhendong commented on May 17, 2024

   

   gdutzhendong

   on May 17, 2024

   Author

   More actions

   pr: #462
2. gdutzhendong

   changed the title [-]在webComponent自定义元素a的shadow dom里面使用TimePicker组件，把这个自定义元素a放到另外一个webComponent自定元素b的shadow dom中,TimePicker组件无法选中时间，第二次点击时间，会自动关闭时间选择框。排除后发现是依赖的这个项目的问题[/-] [+]generateTrigger在多层shadow元素中使用的异常[/+] on May 18, 2024
3. Psvensso commented on Jul 5, 2024

   

   Psvensso

   on Jul 5, 2024

   Last edited by Psvensso

   More actions

   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
4. Psvensso commented on Jul 8, 2024

   

   Psvensso

   on Jul 8, 2024

   More actions

   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
5. afc163 commented on Sep 3, 2024

   

   afc163

   on Sep 3, 2024

   Member

   More actions

   Fixed in #471
6. afc163

   closed this as completedon Sep 3, 2024