feat(core): add select methods for focus and blur

angular/projects/catalyst/src/lib/directives/proxies.ts

@@ -798,7 +798,7 @@ export declare interface CatScrollable extends Components.CatScrollable {
     'tags',
     'value'
   ],
-  methods: ['connect']
+  methods: ['doFocus', 'doBlur', 'clear', 'connect']
 })
 @Component({
   selector: 'cat-select',

core/src/components.d.ts

@@ -798,6 +798,10 @@ export namespace Components {
      * type.
      */
     interface CatSelect {
+        /**
+          * Clear the input.
+         */
+        "clear": () => Promise<void>;
         /**
           * Whether the select should show a clear button.
          */
@@ -815,6 +819,15 @@ export namespace Components {
           * Whether the select is disabled.
          */
         "disabled": boolean;
+        /**
+          * Programmatically remove focus from the input. Use this method instead of `input.blur()`.
+         */
+        "doBlur": () => Promise<void>;
+        /**
+          * Programmatically move focus to the input. Use this method instead of `input.focus()`.
+          * @param options An optional object providing options to control aspects of the focusing process.
+         */
+        "doFocus": (options?: FocusOptions) => Promise<void>;
         /**
           * Fine-grained control over when the errors are shown. Can be `false` to never show errors, `true` to show errors on blur, or a number to show errors on change with the given delay in milliseconds.
          */

core/src/components/cat-select/cat-select.tsx

@@ -486,6 +486,35 @@ export class CatSelect {
     }
   }
 
+  /**
+   * Programmatically move focus to the input. Use this method instead of
+   * `input.focus()`.
+   *
+   * @param options An optional object providing options to control aspects of
+   * the focusing process.
+   */
+  @Method()
+  async doFocus(options?: FocusOptions): Promise<void> {
+    this.input?.focus(options);
+  }
+
+  /**
+   * Programmatically remove focus from the input. Use this method instead of
+   * `input.blur()`.
+   */
+  @Method()
+  async doBlur(): Promise<void> {
+    this.input?.blur();
+  }
+
+  /**
+   * Clear the input.
+   */
+  @Method()
+  async clear(): Promise<void> {
+    this.clearInput();
+  }
+
   /**
    * Connect the functions of the select
    *
@@ -670,7 +699,7 @@ export class CatSelect {
                   variant="text"
                   size="s"
                   a11yLabel={i18n.t('input.clear')}
-                  onCatClick={() => this.clear()}
+                  onCatClick={() => this.clearInput()}
                   data-dropdown-no-close
                 ></cat-button>
               ) : null}
@@ -935,7 +964,7 @@ export class CatSelect {
         : this.select(item);
   }
 
-  private clear() {
+  private clearInput() {
     if (this.input && this.state.term) {
       this.patchState({ selection: [], term: '', activeOptionIndex: -1, tempSelection: [] });
       this.term$.next('');

core/src/components/cat-select/readme.md

@@ -50,6 +50,16 @@ type.
 
 ## Methods
 
+### `clear() => Promise<void>`
+
+Clear the input.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `connect(connector: CatSelectConnector) => Promise<void>`
 
 Connect the functions of the select
@@ -60,6 +70,28 @@ Type: `Promise<void>`
 
 
 
+### `doBlur() => Promise<void>`
+
+Programmatically remove focus from the input. Use this method instead of
+`input.blur()`.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+### `doFocus(options?: FocusOptions) => Promise<void>`
+
+Programmatically move focus to the input. Use this method instead of
+`input.focus()`.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 
 ## Slots