diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts index 148a09a11..2d5e9af7b 100644 --- a/stencil-workspace/src/components.d.ts +++ b/stencil-workspace/src/components.d.ts @@ -163,6 +163,10 @@ export namespace Components { * A promise that returns the filtered options. */ "filterOptions": (search: string) => Promise; + /** + * Focus the autocomplete component + */ + "focusInput": () => Promise; /** * Whether the search icon is included. */ diff --git a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx index f82d0f7ca..13611d7d1 100644 --- a/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx +++ b/stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx @@ -10,6 +10,7 @@ import { Listen, Element, Watch, + Method, } from '@stencil/core'; import { IconSearch } from '../../icons/svgs/icon-search'; @@ -159,6 +160,16 @@ export class ModusAutocomplete { } } + /** Focus the autocomplete component */ + @Method() + async focusInput(): Promise { + const textInputElement = this.el.shadowRoot.querySelector('modus-text-input'); + + if (textInputElement) { + textInputElement.focusInput(); + } + } + @Listen('mousedown', { target: 'document' }) onMouseDown(event: MouseEvent): void { if (!this.hasFocus) { diff --git a/stencil-workspace/src/components/modus-autocomplete/readme.md b/stencil-workspace/src/components/modus-autocomplete/readme.md index 402b89058..5f5538d4f 100644 --- a/stencil-workspace/src/components/modus-autocomplete/readme.md +++ b/stencil-workspace/src/components/modus-autocomplete/readme.md @@ -42,6 +42,19 @@ | `valueChange` | An event that fires when the input value changes. Emits the value string. | `CustomEvent` | +## Methods + +### `focusInput() => Promise` + +Focus the autocomplete component + +#### Returns + +Type: `Promise` + + + + ## Dependencies ### Used by diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx index 46f502954..9ea21ae2e 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx @@ -186,15 +186,23 @@ export class ModusTableCellEditor { selectedOption = this.editedValue as string; } + function handleArrowKeys(e: KeyboardEvent, callback: (e: KeyboardEvent) => void) { + const code = e.key.toLowerCase(); + if (code === KEYBOARD_UP || code === KEYBOARD_DOWN) { + e.stopPropagation(); + } else callback(e); + } + return (
(this.inputElement = el)} options={options} onBlur={this.handleBlur} - onKeyDown={(e) => e.stopPropagation()} + onKeyDown={(e) => handleArrowKeys(e, this.handleKeyDown)} filterOptions={ args.filterOptions ? (...props) => { diff --git a/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx index 1b0988e7d..be767b8c5 100644 --- a/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx +++ b/stencil-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx @@ -245,3 +245,9 @@ interface ModusAutocompleteOption { | `optionSelected` | An event that fires when a dropdown option is selected. Emits the option id. | `CustomEvent` | | `valueChange` | An event that fires when the input value changes. Emits the value string. | `CustomEvent` | | `selectionsChanged` | An event that fires when an option is selected/removed. Emits the option ids. | `CustomEvent` | + +### Methods + +| Method name | Description | Parameter | Return | +| ------------ | --------------- | --------- | --------------- | +| `focusInput` | Focus the input | | `Promise` |