Table: Add Focus Handling for Autocomplete Input in Table Cells (#3047)

* 3044 - autocomple add focus method and table autocomplete focus issue fix

* 3044 - revert keydown behaviour

* 3044 - update storybook docs

* 3044 - handling arrow key actions

stencil-workspace/src/components.d.ts

@@ -163,6 +163,10 @@ export namespace Components {
           * A promise that returns the filtered options.
          */
         "filterOptions": (search: string) => Promise<ModusAutocompleteOption[] | string[]>;
+        /**
+          * Focus the autocomplete component
+         */
+        "focusInput": () => Promise<void>;
         /**
           * Whether the search icon is included.
          */

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<void> {
+    const textInputElement = this.el.shadowRoot.querySelector('modus-text-input');
+
+    if (textInputElement) {
+      textInputElement.focusInput();
+    }
+  }
+
   @Listen('mousedown', { target: 'document' })
   onMouseDown(event: MouseEvent): void {
     if (!this.hasFocus) {

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<string \| string[]>` |
 
 
+## Methods
+
+### `focusInput() => Promise<void>`
+
+Focus the autocomplete component
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
 ## Dependencies
 
 ### Used by

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 (
       <div class="autocomplete-container">
         <modus-autocomplete
           {...this.getDefaultProps('Autocomplete input')}
           include-search-icon="false"
           size="medium"
+          ref={(el) => (this.inputElement = el)}
           options={options}
           onBlur={this.handleBlur}
-          onKeyDown={(e) => e.stopPropagation()}
+          onKeyDown={(e) => handleArrowKeys(e, this.handleKeyDown)}
           filterOptions={
             args.filterOptions
               ? (...props) => {

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<string>`            |
 | `valueChange`       | An event that fires when the input value changes. Emits the value string.     | `CustomEvent<string \|string[]>` |
 | `selectionsChanged` | An event that fires when an option is selected/removed. Emits the option ids. | `CustomEvent<string[]>`          |
+
+### Methods
+
+| Method name  | Description     | Parameter | Return          |
+| ------------ | --------------- | --------- | --------------- |
+| `focusInput` | Focus the input |           | `Promise<void>` |