fixed #1959 #1962 x-trap crawl bug (#1965)

packages/trap/src/index.js

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

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

@@ -2,26 +2,29 @@ import { haveText, test, html, haveFocus } from '../../utils'
 
 test('can trap focus',
     [html`
-        <div x-data="{ open: false }" @keydown.shift.prevent="open = ! open">
+        <div x-data="{ open: false }">
             <input type="text" id="1">
-            <button @click="open = true">Inc</button>
-
-            <div x-trap="open">
-                <input type="text" id="2">
+            <button id="2" @click="open = true">open</button>
+            <div>
+                <div x-trap="open">
+                    <input type="text" id="3">
+                    <button @click="open = false" id="4">close</button>
+                </div>
             </div>
         </div>
     `],
     ({ get }, reload) => {
         get('#1').click()
         get('#1').should(haveFocus())
-        get('#1').type('{shift}')
-        get('#2').should(haveFocus())
-        cy.focused().tab()
-        get('#2').should(haveFocus())
-        get('#2').type('{shift}')
-        get('#1').should(haveFocus())
+        get('#2').click()
+        get('#3').should(haveFocus())
         cy.focused().tab()
+        get('#4').should(haveFocus())
         cy.focused().tab()
+        get('#3').should(haveFocus())
+        cy.focused().tab({shift: true})
+        get('#4').should(haveFocus())
+        cy.focused().click()
         get('#2').should(haveFocus())
     },
 )