fix(select): falsy item text should fallback to value (#2152)

Author: wickning1

COMPONENT_INDEX.md

@@ -3221,14 +3221,14 @@ None.
 
 ### Props
 
-| Prop name | Required | Kind             | Reactive | Type                              | Default value          | Description                               |
-| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ----------------------------------------- |
-| value     | No       | <code>let</code> | No       | <code>string &#124; number</code> | <code>""</code>        | Specify the option value                  |
-| text      | No       | <code>let</code> | No       | <code>string</code>               | <code>""</code>        | Specify the option text                   |
-| hidden    | No       | <code>let</code> | No       | <code>boolean</code>              | <code>false</code>     | Set to `true` to hide the option          |
-| disabled  | No       | <code>let</code> | No       | <code>boolean</code>              | <code>false</code>     | Set to `true` to disable the option       |
-| class     | No       | <code>let</code> | No       | <code>string</code>               | <code>undefined</code> | Specify the class of the `option` element |
-| style     | No       | <code>let</code> | No       | <code>string</code>               | <code>undefined</code> | Specify the style of the `option` element |
+| Prop name | Required | Kind             | Reactive | Type                              | Default value          | Description                                                                        |
+| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ---------------------------------------------------------------------------------- |
+| value     | No       | <code>let</code> | No       | <code>string &#124; number</code> | <code>""</code>        | Specify the option value                                                           |
+| text      | No       | <code>let</code> | No       | <code>string</code>               | <code>undefined</code> | Specify the option text<br />If not specified, the value will be used as the text. |
+| hidden    | No       | <code>let</code> | No       | <code>boolean</code>              | <code>false</code>     | Set to `true` to hide the option                                                   |
+| disabled  | No       | <code>let</code> | No       | <code>boolean</code>              | <code>false</code>     | Set to `true` to disable the option                                                |
+| class     | No       | <code>let</code> | No       | <code>string</code>               | <code>undefined</code> | Specify the class of the `option` element                                          |
+| style     | No       | <code>let</code> | No       | <code>string</code>               | <code>undefined</code> | Specify the style of the `option` element                                          |
 
 ### Slots
 

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,

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;

tests/Select/Select.falsy.test.svelte

@@ -7,3 +7,9 @@
   <SelectItem value={0} text="Zero" />
   <SelectItem value={1} text="One" />
 </Select>
+
+<Select labelText="Undefined text">
+  <SelectItem value={2} />
+  <SelectItem value={0} text="Zero" />
+  <SelectItem value={1} text="One" />
+</Select>

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();
   });
 });

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;