feat(core/select): input event (#608)

Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com> Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>
siemens · Jul 17, 2023 · 750eb8e · 750eb8e
1 parent b7e95f5
commit 750eb8e
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 1 deletion.
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -1693,7 +1693,7 @@ export class IxSelect {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['itemSelectionChange', 'addItem']);
+    proxyOutputs(this, this.el, ['itemSelectionChange', 'inputChange', 'addItem']);
   }
 }
 
@@ -1703,6 +1703,10 @@ export declare interface IxSelect extends Components.IxSelect {
    * Item selection changed
    */
   itemSelectionChange: EventEmitter<CustomEvent<string | string[]>>;
+  /**
+   * Event dispatched whenever the text input changes. @since 2.0.0
+   */
+  inputChange: EventEmitter<CustomEvent<string>>;
   /**
    * Item added to selection
    */

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -8802,6 +8802,20 @@
           "docs": "Item added to selection",
           "docsTags": []
         },
+        {
+          "event": "inputChange",
+          "detail": "string",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event dispatched whenever the text input changes.",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "2.0.0"
+            }
+          ]
+        },
         {
           "event": "itemSelectionChange",
           "detail": "string | string[]",

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -4458,6 +4458,11 @@ declare namespace LocalJSX {
           * Item added to selection
          */
         "onAddItem"?: (event: IxSelectCustomEvent<string>) => void;
+        /**
+          * Event dispatched whenever the text input changes.
+          * @since 2.0.0
+         */
+        "onInputChange"?: (event: IxSelectCustomEvent<string>) => void;
         /**
           * Item selection changed
          */

diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
@@ -95,6 +95,13 @@ export class Select {
    */
   @Event() itemSelectionChange: EventEmitter<string | string[]>;
 
+  /**
+   * Event dispatched whenever the text input changes.
+   *
+   * @since 2.0.0
+   */
+  @Event() inputChange: EventEmitter<string>;
+
   /**
    * Item added to selection
    */
@@ -207,6 +214,12 @@ export class Select {
     this.inputValue = null;
   }
 
+  componentDidLoad() {
+    this.inputRef.addEventListener('input', () => {
+      this.inputChange.emit(this.inputRef.value);
+    });
+  }
+
   componentWillLoad() {
     if (this.selectedIndices) {
       this.selectValue(

diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts
@@ -603,6 +603,7 @@ export const IxSelect = /*@__PURE__*/ defineContainer<JSX.IxSelect>('ix-select',
   'i18nNoMatches',
   'hideListHeader',
   'itemSelectionChange',
+  'inputChange',
   'addItem'
 ]);