fix(#182): improve event handling for adding/removing options

MaibornWolff · Jul 6, 2023 · c9eedef · c9eedef
1 parent 26bf1e6
commit c9eedef
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 59 deletions.
diff --git a/mwui-stencil/src/components.d.ts b/mwui-stencil/src/components.d.ts
@@ -1491,11 +1491,11 @@ declare namespace LocalJSX {
     /**
      * Emits an event when value of input changes
      */
-    onMwChipListInputChange?: (event: MwChipInputCustomEvent<string>) => void;
+    onInputChange?: (event: MwChipInputCustomEvent<string>) => void;
     /**
      * Emits an event when its value changes
      */
-    onMwChipListValueChanged?: (event: MwChipInputCustomEvent<string[]>) => void;
+    onValueChanged?: (event: MwChipInputCustomEvent<string[]>) => void;
     /**
      * Amount of currently selected options
      */

diff --git a/mwui-stencil/src/components/mw-autocomplete/mw-autocomplete.stories.tsx b/mwui-stencil/src/components/mw-autocomplete/mw-autocomplete.stories.tsx
@@ -58,10 +58,10 @@ const IconTemplate = args => `
   >
   <mw-icon slot="icon-start" icon="search"></mw-icon>
   <div slot="dropdown-menu">
-    <mw-menu-item title="List Item 1"></mw-menu-item>
-    <mw-menu-item title="List Item 2"></mw-menu-item>
-    <mw-menu-item title="List Item 3"></mw-menu-item>
-    <mw-menu-item title="List Item 4"></mw-menu-item>
+    <mw-menu-item text="List Item 1"></mw-menu-item>
+    <mw-menu-item text="List Item 2"></mw-menu-item>
+    <mw-menu-item text="List Item 3"></mw-menu-item>
+    <mw-menu-item text="List Item 4"></mw-menu-item>
   </div>
 
 </mw-autocomplete>`;

diff --git a/mwui-stencil/src/components/mw-autocomplete/mw-autocomplete.tsx b/mwui-stencil/src/components/mw-autocomplete/mw-autocomplete.tsx
@@ -80,7 +80,7 @@ export class MwAutocomplete {
   /**
    * Currently selected options
    */
-  @Prop({ reflect: true, mutable: false }) selected: string[] = [];
+  @Prop({ reflect: true, mutable: true }) selected: string[] = [];
   @Watch("selected")
   onSelectedChange(selected: string[]): void {
     if (!this.canAddToValues()) {
@@ -116,8 +116,8 @@ export class MwAutocomplete {
     this.hasIconStartSlot = !!this.hostElement.querySelector("[slot='icon-start']");
   }
 
-  private onInputChange = (event: MwChipInputCustomEvent<string> | MwTextfieldCustomEvent<string>): void => {
-    this.filterDropdownOptions(event.detail);
+  private onInputChange = (event: MwChipInputCustomEvent<string> | MwTextfieldCustomEvent<string> | InputEvent): void => {
+    this.filterDropdownOptions((event.target as HTMLMwChipInputElement).value);
     this.isDropdownOpen = true;
   };
 
@@ -138,22 +138,22 @@ export class MwAutocomplete {
     this.removeDropdownFilter();
   };
 
-  private setItemDisabledState(selected: string[]): void {
+  private setItemDisabledState = (selected: string[]): void => {
     this.hostElement.querySelectorAll("mw-menu-item").forEach(item => {
       const isDisabled = selected.includes(item.getAttribute("value"));
       item.setAttribute("disabled", `${isDisabled}`);
     });
-  }
+  };
 
-  private handleChipListValueChange(event: MwChipInputCustomEvent<string[]>): void {
+  private handleChipListValueChange = (event: MwChipInputCustomEvent<string[]>): void => {
     this.selected = event.detail;
-  }
+  };
 
-  private filterDropdownOptions = (value: string): void => {
+  private filterDropdownOptions = (value: string | number): void => {
     let hasNoSuggestions = true;
 
     this.hostElement.querySelectorAll("mw-menu-item").forEach(item => {
-      if (item.value.toLowerCase().includes(value.toLowerCase())) {
+      if (item.value.toLowerCase().includes(value.toString().toLowerCase())) {
         item.style.display = "unset";
         hasNoSuggestions = false;
       } else {
@@ -173,9 +173,9 @@ export class MwAutocomplete {
     });
   };
 
-  private canAddToValues(): boolean {
+  private canAddToValues = (): boolean => {
     return !this.maximum || this.selected?.length < this.maximum;
-  }
+  };
 
   render() {
     return (
@@ -201,8 +201,8 @@ export class MwAutocomplete {
                   selectedChips={this.selected}
                   onFocus={this.onFocus}
                   onBlur={this.onBlur}
-                  onMwChipListValueChanged={this.handleChipListValueChange.bind(this)}
-                  onMwChipListInputChange={this.onInputChange.bind(this)}
+                  onValueChanged={this.handleChipListValueChange}
+                  onInput={this.onInputChange}
                   slot="anchor"
                 >
                   {this.hasIconStartSlot && (

diff --git a/mwui-stencil/src/components/mw-chip-input/mw-chip-input.tsx b/mwui-stencil/src/components/mw-chip-input/mw-chip-input.tsx
@@ -14,12 +14,12 @@ export class MwChipInput {
   /**
    * Emits an event when its value changes
    */
-  @Event({ bubbles: true, composed: false, eventName: "mwChipListValueChanged" }) valueChanged: EventEmitter<string[]>;
+  @Event({ bubbles: true, composed: true, eventName: "valueChanged" }) valueChanged: EventEmitter<string[]>;
 
   /**
    * Emits an event when value of input changes
    */
-  @Event({ bubbles: true, composed: false, eventName: "mwChipListInputChange" }) inputChange: EventEmitter<string>;
+  @Event({ bubbles: true, composed: true }) inputChange: EventEmitter<string>;
   /**
    * input field name
    */
@@ -143,6 +143,11 @@ export class MwChipInput {
     this.focused = false;
   };
 
+  private onRemoveSelection = (value: string): void => {
+    this._selection.deselect(value);
+    this.onValueChange();
+  };
+
   private addMultiValue = (value: string): void => {
     if (value.trim()?.length === 0) {
       return;
@@ -162,18 +167,18 @@ export class MwChipInput {
     this.onValueChange();
   };
 
-  private onValueChange(): void {
+  private onValueChange = (): void => {
     this.selected = this._selection.selected;
     this.valueChanged.emit(this.selected);
-  }
+  };
 
-  private handleInputChange(): void {
+  private handleInputChange = (): void => {
     this.inputChange.emit(this.inputElement.value);
-  }
+  };
 
-  private canAddToValues(): boolean {
+  private canAddToValues = (): boolean => {
     return !this.maximum || this.selected?.length < this.maximum;
-  }
+  };
 
   render() {
     const {
@@ -187,7 +192,6 @@ export class MwChipInput {
       name,
       clearMultiValues,
       selected,
-      handleInputChange,
       required,
       hasError,
       inline,
@@ -229,7 +233,7 @@ export class MwChipInput {
               </span>
               <div class="input-options">
                 {selected?.map(v => (
-                  <mw-chip key={v} showClose={true} value={v} selected={true} toggleable={false} disabled={disabled}>
+                  <mw-chip key={v} onMwChipClose={() => this.onRemoveSelection(v)} showClose={true} value={v} selected={true} toggleable={false} disabled={disabled}>
                     {v}
                   </mw-chip>
                 ))}
@@ -246,7 +250,7 @@ export class MwChipInput {
                     name={name}
                     value={this.value}
                     disabled={disabled}
-                    onInput={handleInputChange.bind(this)}
+                    onInput={this.handleInputChange}
                   />
                 )}
               </div>

diff --git a/mwui-stencil/src/index.html b/mwui-stencil/src/index.html
@@ -463,12 +463,12 @@ <h2>Dropdown</h2>
       <div style="display: flex; flex-flow: row">
         <mw-dropdown label="Dropdown" placeholder="Select option" inline="true">
           <div slot="dropdown-menu">
-            <mw-menu-item value="item-1" title="List Item 1" disabled></mw-menu-item>
-            <mw-menu-item value="item-2" title="List Item 2" subtitle="Subtitle"> </mw-menu-item>
+            <mw-menu-item value="item-1" text="List Item 1" disabled></mw-menu-item>
+            <mw-menu-item value="item-2" text="List Item 2" subtitle="Subtitle"> </mw-menu-item>
             <mw-divider></mw-divider>
-            <mw-menu-item value="item-3" title="List Item 3"> </mw-menu-item>
-            <mw-menu-item value="item-4" title="List Item 4" subtitle="Some very long Subtitle"> </mw-menu-item>
-            <mw-menu-item value="item-5" title="List Item 5" subtitle="Subtitle"> </mw-menu-item>
+            <mw-menu-item value="item-3" text="List Item 3"> </mw-menu-item>
+            <mw-menu-item value="item-4" text="List Item 4" subtitle="Some very long Subtitle"> </mw-menu-item>
+            <mw-menu-item value="item-5" text="List Item 5" subtitle="Subtitle"> </mw-menu-item>
           </div>
         </mw-dropdown>
       </div>
@@ -480,43 +480,43 @@ <h2>Autocomplete</h2>
       <div style="width: 500px">
         <mw-autocomplete inline multiple placeholder="Select options..." maximum="4" label="Multi choice" option-counter helper-text="Pick up to 8 options:">
           <div slot="dropdown-menu">
-            <mw-menu-item title="Audi"></mw-menu-item>
-            <mw-menu-item title="BMW" disabled></mw-menu-item>
-            <mw-menu-item title="Ford"></mw-menu-item>
-            <mw-menu-item title="Hyundai"></mw-menu-item>
-            <mw-menu-item title="Mercedes-Benz"></mw-menu-item>
-            <mw-menu-item title="Porsche"></mw-menu-item>
-            <mw-menu-item title="Toyota"></mw-menu-item>
-            <mw-menu-item title="Volkswagen"></mw-menu-item>
+            <mw-menu-item text="Audi"></mw-menu-item>
+            <mw-menu-item text="BMW" disabled></mw-menu-item>
+            <mw-menu-item text="Ford"></mw-menu-item>
+            <mw-menu-item text="Hyundai"></mw-menu-item>
+            <mw-menu-item text="Mercedes-Benz"></mw-menu-item>
+            <mw-menu-item text="Porsche"></mw-menu-item>
+            <mw-menu-item text="Toyota"></mw-menu-item>
+            <mw-menu-item text="Volkswagen"></mw-menu-item>
           </div>
         </mw-autocomplete>
         <mw-autocomplete multiple placeholder="Select options..." maximum="8" label="Multi choice" option-counter helper-text="Pick up to 4 options:">
           <mw-icon slot="icon-start" icon="directions_car"></mw-icon>
           <div slot="dropdown-menu">
-            <mw-menu-item title="Audi"></mw-menu-item>
-            <mw-menu-item title="BMW" disabled></mw-menu-item>
-            <mw-menu-item title="Ford"></mw-menu-item>
-            <mw-menu-item title="Hyundai"></mw-menu-item>
-            <mw-menu-item title="Mercedes-Benz"></mw-menu-item>
-            <mw-menu-item title="Porsche"></mw-menu-item>
-            <mw-menu-item title="Toyota"></mw-menu-item>
-            <mw-menu-item title="Volkswagen"></mw-menu-item>
+            <mw-menu-item text="Audi"></mw-menu-item>
+            <mw-menu-item text="BMW" disabled></mw-menu-item>
+            <mw-menu-item text="Ford"></mw-menu-item>
+            <mw-menu-item text="Hyundai"></mw-menu-item>
+            <mw-menu-item text="Mercedes-Benz"></mw-menu-item>
+            <mw-menu-item text="Porsche"></mw-menu-item>
+            <mw-menu-item text="Toyota"></mw-menu-item>
+            <mw-menu-item text="Volkswagen"></mw-menu-item>
           </div>
         </mw-autocomplete>
         <mw-autocomplete label="Single choice" placeholder="Add choices..." has-error>
           <div slot="dropdown-menu">
-            <mw-menu-item title="Item 1"></mw-menu-item>
-            <mw-menu-item title="Item 2"></mw-menu-item>
-            <mw-menu-item title="Item 3"></mw-menu-item>
-            <mw-menu-item title="Item 4"></mw-menu-item>
+            <mw-menu-item text="Item 1"></mw-menu-item>
+            <mw-menu-item text="Item 2"></mw-menu-item>
+            <mw-menu-item text="Item 3"></mw-menu-item>
+            <mw-menu-item text="Item 4"></mw-menu-item>
           </div>
         </mw-autocomplete>
         <mw-autocomplete label="Single choice" placeholder="Add choices..." inline>
           <div slot="dropdown-menu">
-            <mw-menu-item title="Item 1"></mw-menu-item>
-            <mw-menu-item title="Item 2"></mw-menu-item>
-            <mw-menu-item title="Item 3"></mw-menu-item>
-            <mw-menu-item title="Item 4"></mw-menu-item>
+            <mw-menu-item text="Item 1"></mw-menu-item>
+            <mw-menu-item text="Item 2"></mw-menu-item>
+            <mw-menu-item text="Item 3"></mw-menu-item>
+            <mw-menu-item text="Item 4"></mw-menu-item>
           </div>
         </mw-autocomplete>
       </div>