fix(release): allow combobox the option to turn off filtering (#1838)

fixes an Inconsistancy in timepicker where multiple options cannot be seen by the User.
momentum-design · Nov 27, 2024 · 00c1b21 · 00c1b21
1 parent 7fa3f4d
commit 00c1b21
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 0 deletions.
diff --git a/web-components/src/components/combobox/ComboBox.test.ts b/web-components/src/components/combobox/ComboBox.test.ts
@@ -1516,5 +1516,15 @@ describe("Combobox Component", () => {
       expect(el.selectedOptions.length).toEqual(1);
       expect(el.selectedOptions).toEqual(expect.arrayContaining(["Afghanistan"]));
     });
+
+    test("should preserve options list when preventFilter is true", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox .options=${comboBoxOptions} prevent-filter></md-combobox>
+      `);
+      el.inputValue = "Afghanistan";
+      await elementUpdated(el);
+      expect(el.filteredOptions.length).toEqual(comboBoxOptions.length);
+      expect(el.filteredOptions).toEqual(expect.arrayContaining(comboBoxOptions));
+    });
   });
 });
diff --git a/web-components/src/components/combobox/ComboBox.ts b/web-components/src/components/combobox/ComboBox.ts
@@ -110,6 +110,7 @@ export namespace ComboBox {
     @property({ type: String, attribute: "popup-chevron-aria-hidden" }) popupChevronAriaHidden = "true";
     @property({ type: Boolean, reflect: true }) newMomentum = false;
     @property({ type: Boolean, attribute: "show-filter-icon" }) showFilterIcon = false;
+    @property({ type: Boolean, attribute: "prevent-filter" }) preventFilter = false;
 
     /**
      * When using the new momentum style sets whether to use the new combobox style arrow
@@ -563,6 +564,11 @@ export namespace ComboBox {
     };
 
     private filterOptions(value: string): (string | OptionMember)[] {
+      if(this.preventFilter)
+      {
+         this.searchItem = false;
+         return this.options;
+      }
       if (value && value.length) {
         const finalFilteredOption = this.options.filter((option: string | OptionMember) => {
           if (this.isOptGroup && typeof option !== "string" && option.isLabel === "true") {

diff --git a/web-components/src/components/timepicker/TimePicker.ts b/web-components/src/components/timepicker/TimePicker.ts
@@ -392,6 +392,7 @@ export namespace TimePicker {
           class="amPm-combo-box"
           .options=${options}
           .value=${[options[0]]}
+          .preventFilter=${true}
           .inputValue=${this.timeValue[TIME_UNIT.AM_PM]}
           .ariaLabel=${this.timeValue[TIME_UNIT.AM_PM]}
           @change-selected="${(e: CustomEvent) => this.handleTimeChange(e, TIME_UNIT.AM_PM)}"