Possible bug with `<.focus_wrap>`

[sodapopcan]

Environment

• Elixir version: 1.17.3
• Phoenix version: 1.7.18
• Phoenix LiveView version: 1.0.2
• Operating system: macOS 14.3
• Browsers you attempted to reproduce this bug on (the more the merrier): FireFox, Chrome, Safari (though in Safari it's a whole other problem)
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes (I don't have any node_modules)

Actual behavior

I have an application with a "three dot" menu. When opening it, I have a <.focus_wrap> around a group of buttons. When first hitting "tab" focus-visible is given to the last button in the list.

It turns out this is reproducible in a simple way. Even though it's not normal to have <.focus_wrap> outside of an initial hidden element, it exhibits the same behaviour.

Here is the gist.

When navigating to http://localhost:5001, you'll see the first button has focus as expected. Click off to the left so that is looses focus, then hit Tab. If you're seeing what I'm seeing, the last button will get focus. It will then wrap around to the first and continue as normal.

Now if you change line 54 of the gist to: <.focus_wrap id="focus-wrap" class="space-x-8">, recompile, and do the same instructions again, you should see that it behaves as expected now with the first button getting focus! This is very confounding. I've found that random combinations of adding html or CSS will make it work sometimes and other times not. This gist is using Tailwind while the project I found this in is not (although actually Tailwind is present via storybook).

Expected behavior

The first element should always gain focus.

I'm not sure if I'm just doing something wrong. I posted earlier about it on Elixir Forum and was met with crickets. It hasn't been that long but I'm very curious about this. I also tried setting up LiveView for local development to see if I could figure it out but I hit a bunch of stumbling blocks that at this point I'm just too tired to work through. I'll try again tomorrow, but I wanted to report this here.

Thanks!

[SteffenDE]

@sodapopcan thank you for reporting! Can you please try

{:phoenix_live_view, github: "phoenixframework/phoenix_live_view", branch: "sd-focus-wrap-enter-assets", override: true}

and report back?

Btw, I couldn't see a difference with space-x-8.

[SteffenDE]

Nevermind, you can try main now 😃

[sodapopcan]

Hey, thanks for looking into this, Steffen and Chris!

So, it does work in my single-file test except it now seems to be the opposite: without spacing it works but when I add the spacing it focuses the last one first. I also tried it in my app where there is no space between the elements but there is other markup/css and it's still not working. I'm trying to put together another demo.

Also, very strange you didn't see the difference. Sometimes I had to reload a couple of times to see it fail after loading without it, but afterwards I was able to reliably see the difference. I'm mostly working Firefox.