trap affects collapse's animation

[chrisrowe]

When using x-trap and x-collapse on the same element, the height transition looks odd, since the browser is jumping immediately to the first focusable element the content becomes partially scrolled and the animation looks broken.

Here's an example sandbox showing the difference https://codesandbox.io/s/alpine-trap-collapse-bug-87o0y

Is there a work around anyone knows for this?

[snellingio]

This is definitely an issue. x-trap also affects x-transition as well.

I haven't been able to dig any deeper... but I've removed the trap plugin until I can revisit.

[snellingio]

<div x-show="modal"
     x-intersect:enter="setTimeout(() => $el.setAttribute('x-trap', 'modal'), 350)"
     x-intersect:leave="$el.removeAttribute('x-trap')">

I gave it another look last night.

It seems like the adding the trap attribute AFTER the transition duration works as expected. So if the duration is 300ms, a set timeout for 350 works fine. Combined with the intersection, works fine.

Also, this broken animation doesn't seem to affect safari. Weird!

[chrisrowe]

Thanks for looking at this with me!

I'm not seeing this solve the issue here, I think the theory is correct but the attaching the behaviour on intersect wont solve for the example sandbox because although the div is hidden with overflow: hidden; height: 0px; it's still always in the viewport

[aerni]

Gave this solution a try, and it works like a charm. Thanks!

[aerni]

I found an even better solution in #3159. Simply add the noautofocus modifier. So the example above becomes:

<div x-show="modal" x-trap.noautofocus="modal">

[james0r]

Still seeing this

Screen_Recording_2023-01-16_at_5.03.46_PM.mp4