Merge pull request #514 from vanbroup/autofocus

Add a configurable autofocus option

docs/content/docs/ui.md

@@ -169,3 +169,16 @@ new PagefindUI({
 A set of custom ui strings to use instead of the automatically detected language strings. See the [translations/en.json](https://github.com/CloudCannon/pagefind/blob/main/pagefind_ui/translations/en.json) file for all available keys and their initial values.
 
 The items in square brackets such as `SEARCH_TERM` will be substituted dynamically when the text is used.
+
+### Autofocus
+
+{{< diffcode >}}
+```javascript
+new PagefindUI({
+    element: "#search",
++    autofocus: true 
+});
+```
+{{< /diffcode >}}
+
+Enabling autofocus automatically directs attention to the search input field for enhanced user convenience, particularly beneficial when the UI is loaded within a modal dialog. However, exercise caution, as using autofocus indiscriminately may pose potential accessibility challenges.

pagefind_ui/default/svelte/ui.svelte

@@ -34,6 +34,7 @@
   export let merge_index = [];
   export let trigger_search_term = "";
   export let translations = {};
+  export let autofocus = false;
 
   let val = "";
   $: if (trigger_search_term) {
@@ -239,6 +240,7 @@
       )}
       autocapitalize="none"
       enterkeyhint="search"
+      {autofocus}
     />
 
     <button

pagefind_ui/default/ui-core.js

@@ -26,6 +26,7 @@ export class PagefindUI {
     let debounceTimeoutMs = opts.debounceTimeoutMs ?? 300;
     let mergeIndex = opts.mergeIndex ?? [];
     let translations = opts.translations ?? [];
+    let autofocus = opts.autofocus ?? false;
 
     // Remove the UI-specific config before passing it along to the Pagefind backend
     delete opts["element"];
@@ -41,6 +42,7 @@ export class PagefindUI {
     delete opts["debounceTimeoutMs"];
     delete opts["mergeIndex"];
     delete opts["translations"];
+    delete opts["autofocus"];
 
     const dom =
       selector instanceof HTMLElement
@@ -62,6 +64,7 @@ export class PagefindUI {
           debounce_timeout_ms: debounceTimeoutMs,
           merge_index: mergeIndex,
           translations,
+          autofocus,
           pagefind_options: opts,
         },
       });