Allow to navigate to dropdown entries by keyboard

This commit is contained in:
Jan Böhmer 2024-02-28 22:06:54 +01:00
parent f70f6c39ce
commit faa3bea3ab

View file

@ -50,6 +50,25 @@ export default class extends Controller {
plugins: [recentSearchesPlugin],
openOnFocus: true,
placeholder: "Search for parts",
// Use a navigator compatible with turbo:
navigator: {
navigate({ itemUrl }) {
window.Turbo.visit(itemUrl, { action: "advance" });
},
navigateNewTab({ itemUrl }) {
const windowReference = window.open(itemUrl, '_blank', 'noopener');
if (windowReference) {
windowReference.focus();
}
},
navigateNewWindow({ itemUrl }) {
window.open(itemUrl, '_blank', 'noopener');
},
},
// If the form is submitted, forward the term to the form
onSubmit({state, event, ...setters}) {
//Put the current text into each target input field
const input = that.inputTarget;
@ -61,6 +80,8 @@ export default class extends Controller {
input.value = state.query;
input.form.requestSubmit();
},
getSources({ query }) {
return [
{
@ -71,6 +92,9 @@ export default class extends Controller {
return fetch(url)
.then((response) => response.json());
},
getItemUrl({ item }) {
return part_detail_uri_template.replace('__ID__', item.id);
},
templates: {
header({ html }) {
return html`<span class="aa-SourceHeaderTitle">Parts</span>