fix(combobox): remove view all options

eBay · Jan 18, 2025 · 11ecefd · 11ecefd
1 parent b4c4f6b
commit 11ecefd
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 14 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,7 +27,6 @@ interface ComboboxInput extends Omit<Marko.Input<"input">, `on${string}`> {
     autocomplete?: "list" | "none";
     "list-selection"?: "manual" | "automatic";
     "floating-label"?: AttrString;
-    "view-all-options"?: boolean;
     button?: Marko.Input<"button"> &
         Marko.AttrTag<{
             htmlAttributes?: Record<string, unknown>;
@@ -349,8 +348,7 @@ export default class Combobox extends Marko.Component<Input, State> {
 
     _getVisibleOptions() {
         if (
-            this.autocomplete === "none" ||
-            (this.input.viewAllOptions ?? false)
+            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",
         });
     });