Browse Source

Make x-trap more friendly with transitions

Caleb Porzio 1 year ago
parent
commit
61714ffe64
1 changed files with 8 additions and 5 deletions
  1. 8 5
      packages/focus/src/index.js

+ 8 - 5
packages/focus/src/index.js

@@ -134,12 +134,15 @@ export default function (Alpine) {
 
                 // Start trapping.
                 if (value && ! oldValue) {
-                    setTimeout(() => {
-                        if (modifiers.includes('inert')) undoInert = setInert(el)
-                        if (modifiers.includes('noscroll')) undoDisableScrolling = disableScrolling()
+                    if (modifiers.includes('noscroll')) undoDisableScrolling = disableScrolling()
+                    if (modifiers.includes('inert')) undoInert = setInert(el)
 
-                        trap.activate()
-                    });
+                    // Activate the trap after two ticks. (Needed to play nice with transitions...)
+                    setTimeout(() => {
+                        setTimeout(() => {
+                            trap.activate()
+                        })
+                    })
                 }
 
                 // Stop trapping.