From 11ecefd0831d5260587dc37f46d52b8d72ff440d Mon Sep 17 00:00:00 2001 From: Andrew Gliga Date: Thu, 16 Jan 2025 08:52:54 -0800 Subject: [PATCH] fix(combobox): remove view all options --- .changeset/breezy-toys-agree.md | 6 +++ .../ebay-combobox/combobox.stories.ts | 10 ---- src/components/ebay-combobox/component.ts | 4 +- .../show-all-options-and-filter.marko | 48 +++++++++++++++++++ .../ebay-combobox/test/test.browser.js | 2 +- 5 files changed, 56 insertions(+), 14 deletions(-) create mode 100644 .changeset/breezy-toys-agree.md create mode 100644 src/components/ebay-combobox/examples/show-all-options-and-filter.marko diff --git a/.changeset/breezy-toys-agree.md b/.changeset/breezy-toys-agree.md new file mode 100644 index 000000000..62549466e --- /dev/null +++ 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 index 66103a9b3..fc7f47982 100644 --- 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 index 27776e721..9aa752383 100644 --- a/src/components/ebay-combobox/component.ts +++ b/src/components/ebay-combobox/component.ts @@ -27,7 +27,6 @@ interface ComboboxInput extends Omit, `on${string}`> { autocomplete?: "list" | "none"; "list-selection"?: "manual" | "automatic"; "floating-label"?: AttrString; - "view-all-options"?: boolean; button?: Marko.Input<"button"> & Marko.AttrTag<{ htmlAttributes?: Record; @@ -349,8 +348,7 @@ export default class Combobox extends Marko.Component { _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 new file mode 100644 index 000000000..edb86e7d7 --- /dev/null +++ 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 ""; +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; + } +} + + + + <@option data-id=option.code text=option.name/> + + diff --git a/src/components/ebay-combobox/test/test.browser.js b/src/components/ebay-combobox/test/test.browser.js index c9cb5fbd0..65ecc32e0 100644 --- 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", }); });