Applying :focus-visible state after programmatically moving focus only on initial page landing

[domkl14]

Hi 👋 !

I created this codepen demo to illustrate the issue I'm seeing (GIF repro'd on Chrome).

On first loading into the link, if you click Click to focus the next button, notice that we move focus to the next button (Button to be focused) and a :focus-visible state is applied to it. However, if we then click Random button to click and then again click Click to focus the next button then the :focus-visible state isn't applied.

The :focus-visible doesn't seem to be applying correctly because I added a e.preventDefault() on the mousedown handler on the first button. For our current application, we need to apply this e.preventDefault().

The behavior seems to be inconsistent with Safari as well where the :focus-visible state is always being applied even after clicking on the third button.

I was wondering if there was a way for the focus-visible heuristic to account for this? Or if there's a possible workaround while still maintaining the e.preventDefault() on our mousedown handler.

GIF of demo (Chrome)

Description of GIF: Load the codepen demo, then click the first button, notice :focus-visible state, then click the third button and reclick the first button and notice no :focus-visible state