fix(combobox): remove view all options (#2384)

eBay · Jan 23, 2025 · aad6f91 · aad6f91
1 parent c2b5b9d
commit aad6f91
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 30 deletions.
diff --git a/.changeset/breezy-toys-agree.md b/.changeset/breezy-toys-agree.md
@@ -0,0 +1,6 @@
+---
+"@ebay/ebayui-core": major
+---
+
+fix(combobox): remove view all options
+`view-all-options` is no longer a valid option for combobox. Use `autocomplete: none` instead
diff --git a/src/components/ebay-combobox/combobox.stories.ts b/src/components/ebay-combobox/combobox.stories.ts
@@ -55,16 +55,6 @@ export default {
             description:
                 "default is `automatic`; available values are `automatic`, `manual`. If set to automatic will automatically fill in the input with the currently highlighted item when using the up/down keys.",
         },
-        viewAllOptions: {
-            type: "boolean",
-            control: { type: "boolean" },
-            description: "Filters listbox options based on user input",
-            table: {
-                defaultValue: {
-                    summary: "false",
-                },
-            },
-        },
         "floating-label": {
             control: { type: "text" },
             description:

diff --git a/src/components/ebay-combobox/component.ts b/src/components/ebay-combobox/component.ts
@@ -27,8 +27,7 @@ interface ComboboxInput extends Omit<Marko.HTML.Input, `on${string}`> {
     autocomplete?: "list" | "none";
     "list-selection"?: "manual" | "automatic";
     "floating-label"?: AttrString;
-    "view-all-options"?: boolean;
-    button?: Marko.HTML.Button &
+    button?: Marko.Input<"button"> &
         Marko.AttrTag<{
             htmlAttributes?: Record<string, unknown>;
             renderBody?: Marko.Body;
@@ -51,7 +50,6 @@ export interface Input extends WithNormalizedProps<ComboboxInput> {}
 
 interface State {
     currentValue: Input["value"];
-    viewAllOptions: boolean;
 }
 
 export default class Combobox extends Marko.Component<Input, State> {
@@ -120,14 +118,7 @@ export default class Combobox extends Marko.Component<Input, State> {
     }
 
     handleExpand() {
-        if (this.state.viewAllOptions || this.input.viewAllOptions !== true) {
-            this.setSelectedView();
-        } else {
-            this.state.viewAllOptions = true;
-            this.once("update", () => {
-                this.setSelectedView();
-            });
-        }
+        this.setSelectedView();
         this.emit("expand");
     }
 
@@ -182,8 +173,6 @@ export default class Combobox extends Marko.Component<Input, State> {
                 // We force the expander open just in case.
                 this.expand();
             });
-            this.state.viewAllOptions = false;
-
             this._emitComboboxEvent("input-change");
         });
     }
@@ -235,11 +224,7 @@ export default class Combobox extends Marko.Component<Input, State> {
             input.listSelection === "manual" ? "manual" : "automatic";
         this.lastValue = input.value;
         this.state = {
-            currentValue: this.lastValue,
-            viewAllOptions:
-                (this.state && this.state.viewAllOptions) ||
-                input.viewAllOptions ||
-                false,
+            currentValue: this.lastValue
         };
         if (this.expander) {
             this.expandedChange = input.expanded !== this.expanded;
@@ -362,7 +347,9 @@ export default class Combobox extends Marko.Component<Input, State> {
     }
 
     _getVisibleOptions() {
-        if (this.autocomplete === "none" || this.state.viewAllOptions) {
+        if (
+            this.autocomplete === "none"
+        ) {
             return [...(this.input.options ?? [])];
         }
 

diff --git a/src/components/ebay-combobox/examples/show-all-options-and-filter.marko b/src/components/ebay-combobox/examples/show-all-options-and-filter.marko
@@ -0,0 +1,48 @@
+import countryList from "./data.json";
+import type { AttrStringOrNumber, AttrClass } from "marko/tags-html";
+import type { Input as ComboboxInput } from "<ebay-combobox>";
+class {
+    declare state: {
+        autocompleteOption: "list" | "none";
+        value: AttrStringOrNumber;
+    };
+    timeout: any;
+    onCreate() {
+        this.state = {
+            autocompleteOption: "none",
+            value: ''
+        };
+    }
+    inputChange(e: {
+        currentInputValue: AttrStringOrNumber;
+        options?: Marko.AttrTag<{
+            text: string;
+            value?: string;
+            class?: AttrClass;
+            sticky?: boolean;
+        }>;
+    }) {
+        this.state.value = e.currentInputValue;
+        this.state.autocompleteOption = "list";
+        this.emit('input-change', e)
+   }
+   handleExpand() {
+        this.state.autocompleteOption = "none";
+        this.emit('expand')
+   }
+    selected: ComboboxInput["on-select"] = (e) => {
+        this.state.value = e.currentInputValue;
+    }
+}
+
+<ebay-combobox
+    ...input
+    autocomplete=state.autocompleteOption
+    value=state.value
+    on-expand("handleExpand")
+    on-select("selected")
+    on-input-change("inputChange")>
+    <for|option| of=countryList>
+        <@option data-id=option.code text=option.name/>
+    </for>
+</ebay-combobox>
diff --git a/src/components/ebay-combobox/test/test.browser.js b/src/components/ebay-combobox/test/test.browser.js
@@ -190,7 +190,7 @@ describe("given the combobox with 3 items and 2 selected and view all options",
     beforeEach(async () => {
         component = await render(Isolated, {
             value: Isolated.args.options[1].text,
-            viewAllOptions: true,
+            autocomplete: "none",
         });
     });