diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts index 09e2a2aca..3e11c3d0f 100644 --- a/packages/ketchup/src/components.d.ts +++ b/packages/ketchup/src/components.d.ts @@ -3202,6 +3202,10 @@ export namespace Components { "selectable": boolean; "setBlur": () => Promise; "setFocus": () => Promise; + /** + * Focuses the first element of the list. + */ + "setFocusOnFirstEl": () => Promise; /** * Sets the props to the component. * @param props - Object containing props that will be set to the component. diff --git a/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx b/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx index 0ea13d9fa..81fc42fa0 100644 --- a/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx +++ b/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx @@ -509,6 +509,7 @@ export class KupAutocomplete { const topOffset = hasError || hasAlert ? -20 : 0; this.#textfieldWrapper.classList.add('toggled'); this.#listEl.menuVisible = true; + this.#listEl.setFocusOnFirstEl(); const elStyle = this.#listEl.style; elStyle.height = 'auto'; elStyle.minWidth = this.#textfieldWrapper.clientWidth + 'px'; diff --git a/packages/ketchup/src/components/kup-list/kup-list.tsx b/packages/ketchup/src/components/kup-list/kup-list.tsx index 083343de2..8f8abcc30 100644 --- a/packages/ketchup/src/components/kup-list/kup-list.tsx +++ b/packages/ketchup/src/components/kup-list/kup-list.tsx @@ -202,6 +202,14 @@ export class KupList { /* P u b l i c M e t h o d s */ /*-------------------------------------------------*/ + /** + * Focuses the first element of the list. + */ + @Method() + async setFocusOnFirstEl() { + this.focused = 0; + } + /** * Focuses the next element of the list. */ diff --git a/packages/ketchup/src/components/kup-list/readme.md b/packages/ketchup/src/components/kup-list/readme.md index eb14d492d..94bde95cd 100644 --- a/packages/ketchup/src/components/kup-list/readme.md +++ b/packages/ketchup/src/components/kup-list/readme.md @@ -125,6 +125,16 @@ Type: `Promise` +### `setFocusOnFirstEl() => Promise` + +Focuses the first element of the list. + +#### Returns + +Type: `Promise` + + + ### `setProps(props: GenericObject) => Promise` Sets the props to the component.