Best way to focus out automatically on route change ?

[desaintflorent]

I recently had a problem with Headless Popover component maintained by Tailwindcss team.
The popover component need to loose the focus to be able to close/hide.
Usually the router manage the focus for us when the route change, but with inertia the focus doesn't change automatically.

So what I did, was adding a new div to wrap my app and execute :

import { Inertia } from "@inertiajs/inertia";

Inertia.on("success", (event) => {
    document.getElementById("wrap").focus();
});

To be able to focus on the div I added tabindex prop to the wrap div ( tabindex="-1" )

Why Inertia is not focusing out automatically and what is the best way to do this ? My solution feels a bit dirty...

[reinink]

Why Inertia is not focusing out automatically and what is the best way to do this ? My solution feels a bit dirty...

We don't clear focus because Inertia is an SPA, and we maintain state between visits. This is (almost always) desirable. Typically in situations like this I just manually close dropdowns and other similar UI elements...I honestly don't run into this issue often.

Usually the router manage the focus for us when the route change, but with inertia the focus doesn't change automatically.

That's interesting. Can you give me an example of a library that does this?

[desaintflorent]

Reach Router does this : https://reach.tech/router/
https://github.com/reach/router/blob/d2c9ad06715c9d48c2d16f55f7cd889b626d2521/src/index.js#L291

[reinink]

Interesting. What exactly does it focus on while moving from one page to another?

[desaintflorent]

So would you recommend to change the focus the way I currently do it to close the headlessui popover component ?
There is no better way ?

[reinink]

My concern with your solution is what happens when you submit a form, and there are errors, and you end up back on the same page (form). You'd loose the focus of the input you're on, which really isn't desirable.

This is an interesting problem, and again, not one that I've run into all that much. I really don't know what the ideal way of handling this is. Sorry I cannot be more helpful.