fix(core): Fixed elementIsChildOf returning false for nested web comp…

…onents (#7762) * 7761: Fixed elementIsChildOf returning false for nested web components; added .mjs files to prettier job * do this check only for the wrapper-slot case fixes #7761 --------- Co-authored-by: Vladimir Kharlampidi <[email protected]>
nolimits4web · Jan 2, 2025 · 8136607 · 8136607
1 parent e5ad9fd
commit 8136607
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 12 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -36,7 +36,7 @@ module.exports = {
     ecmaFeatures: {
       jsx: true,
     },
-    ecmaVersion: 2018,
+    ecmaVersion: 2021,
     sourceType: 'module',
   },
 

diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "element": "npm run build && concurrently --kill-others \"vite ./playground/element\" \"npm run watch\" ",
     "react": "npm run build && concurrently --kill-others \"vite ./playground/react\" \"npm run watch\"",
     "vue": "npm run build && concurrently --kill-others \"vite ./playground/vue\" \"npm run watch\"",
-    "prettier": "prettier \"**/*.+(js|json|scss|css|less|ts|jsx)\"",
+    "prettier": "prettier \"**/*.+(js|json|scss|css|less|ts|jsx|mjs)\"",
     "format": "npm run prettier -- --write",
     "check-format": "npm run prettier -- --list-different",
     "lint": "eslint --ext .js,.jsx .",

diff --git a/src/modules/a11y/a11y.mjs b/src/modules/a11y/a11y.mjs
@@ -19,7 +19,7 @@ export default function A11y({ swiper, extendParams, on }) {
       itemRoleDescriptionMessage: null,
       slideRole: 'group',
       id: null,
-      scrollOnFocus: true
+      scrollOnFocus: true,
     },
   });
 

diff --git a/src/shared/utils.mjs b/src/shared/utils.mjs
@@ -213,12 +213,31 @@ function elementChildren(element, selector = '') {
   }
   return children.filter((el) => el.matches(selector));
 }
+function elementIsChildOfSlot(el, slot) {
+  // Breadth-first search through all parent's children and assigned elements
+  const elementsQueue = [slot];
+  while (elementsQueue.length > 0) {
+    const elementToCheck = elementsQueue.shift();
+    if (el === elementToCheck) {
+      return true;
+    }
+    elementsQueue.push(
+      ...elementToCheck.children,
+      ...(elementToCheck.shadowRoot?.children || []),
+      ...(elementToCheck.assignedElements?.() || []),
+    );
+  }
+}
 function elementIsChildOf(el, parent) {
-  const isChild = parent.contains(el);
+  let isChild = parent.contains(el);
   if (!isChild && parent instanceof HTMLSlotElement) {
     const children = [...parent.assignedElements()];
-    return children.includes(el);
+    isChild = children.includes(el);
+    if (!isChild) {
+      isChild = elementIsChildOfSlot(el, parent);
+    }
   }
+
   return isChild;
 }
 function showWarning(text) {

diff --git a/src/vue/get-children.mjs b/src/vue/get-children.mjs
@@ -18,13 +18,9 @@ function getChildren(originalSlots = {}, slidesRef, oldSlidesRef) {
       if (isFragment && vnode.children) {
         getSlidesFromElements(vnode.children, slotName);
       } else if (
-        (
-          vnode.type &&
-          (vnode.type.name === 'SwiperSlide' || vnode.type.name === 'AsyncComponentWrapper')
-        ) ||
-        (
-          vnode.componentOptions && (vnode.componentOptions.tag === 'SwiperSlide')
-        )
+        (vnode.type &&
+          (vnode.type.name === 'SwiperSlide' || vnode.type.name === 'AsyncComponentWrapper')) ||
+        (vnode.componentOptions && vnode.componentOptions.tag === 'SwiperSlide')
       ) {
         slides.push(vnode);
       } else if (slots[slotName]) {