Pagefind UI: Focus the search input

[dprothero]

I'm putting the Pagefind UI within a modal dialog that opens up when someone clicks a Search button in the navbar of my site. Right now, I have to do some hacky stuff to wait for the search input to be rendered and then add focus to it.

Would it make sense to have an option to automatically focus the search input? I'm not super familiar with Svelte, but it seems it would be easier to do it within the Pagefind UI. On the other hand, I don't want to pollute the API with too many options.

[bglw]

I think that's a perfectly reasonable option. I could easily implement:

new PagefindUI({
  element: "#search",
  autoFocus: true
});

As well as a manual action:

let pagefindUI = new PagefindUI({ element: "#search" });
// later...
pagefindUI.focus();

(There's already a hidden triggerSearch function on the object returned from new PagefindUI, so there's a viable home for a focus function)

[dprothero]

That would be fantastic!

[davidsneighbour]

There is an HTML attribute autofocus that should do the trick? Why not add it at least to the PagefindUI as this seems to be something that is designed to be the focal point of a page that it is one (as opposed to a search field somewhere hidden in the navigation bar)?

[bglw]

Generally it's poor accessibility to default to autofocus, as it changes the focus order of the page and may skip past meaningful information — so this will never be the default option.

(Side note, the HTML autofocus attribute doesn't apply to elements that are programmatically created, so it wouldn't work for the UI that is created by JS)

Right now the best solution is to use the Modular UI to hook into an existing input on the page that is under your own control.