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 eab3ec195..95d83635c 100644 --- a/src/components/ebay-combobox/component.ts +++ b/src/components/ebay-combobox/component.ts @@ -27,8 +27,7 @@ interface ComboboxInput extends Omit { 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; renderBody?: Marko.Body; @@ -51,7 +50,6 @@ export interface Input extends WithNormalizedProps {} interface State { currentValue: Input["value"]; - viewAllOptions: boolean; } export default class Combobox extends Marko.Component { @@ -120,14 +118,7 @@ export default class Combobox extends Marko.Component { } 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 { // 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.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 { } _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 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", }); });