Fix recursion problem with x-trap inert (#3309)

* fixed recursion problem with x-trap inert

* added test

* package lock

package-lock.json

@@ -42,6 +42,10 @@
             "resolved": "packages/intersect",
             "link": true
         },
+        "node_modules/@alpinejs/mask": {
+            "resolved": "packages/mask",
+            "link": true
+        },
         "node_modules/@alpinejs/morph": {
             "resolved": "packages/morph",
             "link": true
@@ -50,12 +54,8 @@
             "resolved": "packages/persist",
             "link": true
         },
-        "node_modules/@alpinejs/portal": {
-            "resolved": "packages/portal",
-            "link": true
-        },
-        "node_modules/@alpinejs/trap": {
-            "resolved": "packages/trap",
+        "node_modules/@alpinejs/ui": {
+            "resolved": "packages/ui",
             "link": true
         },
         "node_modules/@babel/code-frame": {
@@ -7806,7 +7806,7 @@
             }
         },
         "packages/alpinejs": {
-            "version": "3.9.0",
+            "version": "3.10.5",
             "license": "MIT",
             "dependencies": {
                 "@vue/reactivity": "~3.1.1"
@@ -7814,7 +7814,7 @@
         },
         "packages/collapse": {
             "name": "@alpinejs/collapse",
-            "version": "3.9.0",
+            "version": "3.10.5",
             "license": "MIT"
         },
         "packages/csp": {
@@ -7827,11 +7827,12 @@
         },
         "packages/docs": {
             "name": "@alpinejs/docs",
-            "version": "3.9.0-revision.2",
+            "version": "3.10.5-revision.1",
             "license": "MIT"
         },
         "packages/focus": {
-            "version": "3.9.0",
+            "name": "@alpinejs/focus",
+            "version": "3.10.5",
             "license": "MIT",
             "dependencies": {
                 "focus-trap": "^6.6.1"
@@ -7847,29 +7848,41 @@
         },
         "packages/intersect": {
             "name": "@alpinejs/intersect",
-            "version": "3.9.0",
+            "version": "3.10.5",
+            "license": "MIT"
+        },
+        "packages/mask": {
+            "name": "@alpinejs/mask",
+            "version": "3.10.5",
             "license": "MIT"
         },
         "packages/morph": {
             "name": "@alpinejs/morph",
-            "version": "3.9.0",
+            "version": "3.10.5",
             "license": "MIT"
         },
         "packages/persist": {
             "name": "@alpinejs/persist",
-            "version": "3.9.0",
+            "version": "3.10.5",
             "license": "MIT"
         },
         "packages/portal": {
             "version": "3.6.1-beta.0",
+            "extraneous": true,
             "license": "MIT"
         },
         "packages/trap": {
             "name": "@alpinejs/trap",
             "version": "0.0.1",
+            "extraneous": true,
             "dependencies": {
                 "focus-trap": "^6.6.1"
             }
+        },
+        "packages/ui": {
+            "name": "@alpinejs/ui",
+            "version": "3.10.5-beta.8",
+            "license": "MIT"
         }
     },
     "dependencies": {
@@ -7900,20 +7913,17 @@
         "@alpinejs/intersect": {
             "version": "file:packages/intersect"
         },
+        "@alpinejs/mask": {
+            "version": "file:packages/mask"
+        },
         "@alpinejs/morph": {
             "version": "file:packages/morph"
         },
         "@alpinejs/persist": {
             "version": "file:packages/persist"
         },
-        "@alpinejs/portal": {
-            "version": "file:packages/portal"
-        },
-        "@alpinejs/trap": {
-            "version": "file:packages/trap",
-            "requires": {
-                "focus-trap": "^6.6.1"
-            }
+        "@alpinejs/ui": {
+            "version": "file:packages/ui"
         },
         "@babel/code-frame": {
             "version": "7.14.5",

packages/focus/src/index.js

@@ -176,9 +176,11 @@ function crawlSiblingsUp(el, callback) {
     if (el.isSameNode(document.body) || ! el.parentNode) return
 
     Array.from(el.parentNode.children).forEach(sibling => {
-        if (! sibling.isSameNode(el)) callback(sibling)
-
-        crawlSiblingsUp(el.parentNode, callback)
+        if (sibling.isSameNode(el)) {
+            crawlSiblingsUp(el.parentNode, callback)
+        } else {
+            callback(sibling)
+        }
     })
 }
 

tests/cypress/integration/plugins/focus.spec.js

@@ -97,6 +97,41 @@ test('can trap focus with inert',
     },
 )
 
+test('inert only applies aria-hidden once',
+    [html`
+        <div>
+            <div id="sibling">I should have aria-hidden applied once</div>
+            <div x-data="{
+                open: false,
+                timesApplied: 0,
+                init() {
+                    let observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.type === 'attributes' && mutation.attributeName === 'aria-hidden') {
+                                this.timesApplied++
+                            }
+                        })
+                    })
+
+                    observer.observe(document.querySelector('#sibling'), {
+                        attributes: true
+                    })
+                },
+            }">
+                <input type="text" id="timesApplied" x-model="timesApplied" />
+                <button id="trigger" @click="open = true">open</button>
+                <div x-trap.inert="open">
+                    Hello, I'm a friendly modal!
+                </div>
+            </div>
+        </div>
+    `],
+    ({ get }, reload) => {
+        get('#trigger').click()
+        get('#timesApplied').should('have.value', '1')
+    },
+)
+
 test('can trap focus with noscroll',
     [html`
         <div x-data="{ open: false }">