From 61ea8dd82c2f9863dfe5f8a882e73624b994d9e5 Mon Sep 17 00:00:00 2001 From: Nick Wing Date: Fri, 18 Apr 2025 12:34:12 -0500 Subject: [PATCH] fix(select): falsy item `text` should fallback to `value` (#2152) --- COMPONENT_INDEX.md | 16 ++++++++-------- docs/src/COMPONENT_API.json | 3 +-- src/Select/SelectItem.svelte | 8 ++++++-- tests/Select/Select.falsy.test.svelte | 6 ++++++ tests/Select/Select.test.ts | 11 +++++++++-- types/Select/SelectItem.svelte.d.ts | 3 ++- 6 files changed, 32 insertions(+), 15 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 766613fc..f1d5b123 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -3221,14 +3221,14 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ----------------------------------------- | -| value | No | let | No | string | number | "" | Specify the option value | -| text | No | let | No | string | "" | Specify the option text | -| hidden | No | let | No | boolean | false | Set to `true` to hide the option | -| disabled | No | let | No | boolean | false | Set to `true` to disable the option | -| class | No | let | No | string | undefined | Specify the class of the `option` element | -| style | No | let | No | string | undefined | Specify the style of the `option` element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ---------------------------------------------------------------------------------- | +| value | No | let | No | string | number | "" | Specify the option value | +| text | No | let | No | string | undefined | Specify the option text
If not specified, the value will be used as the text. | +| hidden | No | let | No | boolean | false | Set to `true` to hide the option | +| disabled | No | let | No | boolean | false | Set to `true` to disable the option | +| class | No | let | No | string | undefined | Specify the class of the `option` element | +| style | No | let | No | string | undefined | Specify the style of the `option` element | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index a5e67ac2..ea4293b0 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -12531,9 +12531,8 @@ { "name": "text", "kind": "let", - "description": "Specify the option text", + "description": "Specify the option text\nIf not specified, the value will be used as the text.", "type": "string", - "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, diff --git a/src/Select/SelectItem.svelte b/src/Select/SelectItem.svelte index 5a5abac8..612ae95d 100644 --- a/src/Select/SelectItem.svelte +++ b/src/Select/SelectItem.svelte @@ -5,8 +5,12 @@ */ export let value = ""; - /** Specify the option text */ - export let text = ""; + /** + * Specify the option text + * If not specified, the value will be used as the text. + * @type {string} + */ + export let text = undefined; /** Set to `true` to hide the option */ export let hidden = false; diff --git a/tests/Select/Select.falsy.test.svelte b/tests/Select/Select.falsy.test.svelte index 2583be30..a7614f47 100644 --- a/tests/Select/Select.falsy.test.svelte +++ b/tests/Select/Select.falsy.test.svelte @@ -7,3 +7,9 @@ + + diff --git a/tests/Select/Select.test.ts b/tests/Select/Select.test.ts index 1d4800b4..0805ae6b 100644 --- a/tests/Select/Select.test.ts +++ b/tests/Select/Select.test.ts @@ -240,10 +240,17 @@ describe("Select", () => { expect(skeleton.children[0]).toHaveClass("bx--skeleton"); }); - it("renders value if `text` is falsy", () => { + it("renders `text` instead of `value` if `text` is an empty string", () => { render(SelectFalsy); expect(screen.getByLabelText("Falsy text")).toHaveValue("-1"); - expect(screen.getByDisplayValue("")).toBeInTheDocument(); + expect(screen.getByRole("option", { name: "" })).toBeInTheDocument(); + }); + + it("renders value if `text` is undefined", () => { + render(SelectFalsy); + + expect(screen.getByLabelText("Undefined text")).toHaveValue("2"); + expect(screen.getByRole("option", { name: "2" })).toBeInTheDocument(); }); }); diff --git a/types/Select/SelectItem.svelte.d.ts b/types/Select/SelectItem.svelte.d.ts index 9da64a80..2d1106b7 100644 --- a/types/Select/SelectItem.svelte.d.ts +++ b/types/Select/SelectItem.svelte.d.ts @@ -9,7 +9,8 @@ export type SelectItemProps = { /** * Specify the option text - * @default "" + * If not specified, the value will be used as the text. + * @default undefined */ text?: string;