I’m confused by this behaviour of <.focus_wrap> and unsure if it’s a bug or not.

I ran across this while rendering a list of buttons in a three dot menu. When opening the menu by hitting space or enter, tab will take me to the last item in the menu.

As I was setting up a demo app, I realized that this behaviour is really easy to reproduce. It’s as simple as:

def render(assigns) do
  ~H"""
  <.focus_wrap id="focus-wrap">
    <button>One</button>
    <button>Two</button>
    <button>Three</button>
  </.focus_wrap>
  """
end

When you navigate to the page, of course the first element is focused (since I’m not bothering hiding it for the example) so click off it somewhere to the left of it. Now hit tab and button “Three” gets focus!

Now, for the even more confounding part, add some space between the buttons:

<.focus_wrap id="focus-wrap" class="space-x-8">

Refresh and follow the same steps again and it works as expected, focusing the “One” button

This feels like a bug or maybe someone has an explanation?

I’ve tried in chrome-based and FF browsers. I’m on LV v1.0.2.

TIA!