fix(select): falsy item text should not override value (#2118)

Fixes #2117
This commit is contained in:
Eric Liu 2025-03-11 10:09:28 -07:00 committed by GitHub
commit 663b79ad05
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 18 additions and 1 deletions

View file

@ -55,5 +55,5 @@
class={className} class={className}
{style} {style}
> >
{text || value} {text ?? value}
</option> </option>

View file

@ -0,0 +1,9 @@
<script lang="ts">
import { Select, SelectItem } from "carbon-components-svelte";
</script>
<Select labelText="Falsy text">
<SelectItem value={-1} text="" />
<SelectItem value={0} text="Zero" />
<SelectItem value={1} text="One" />
</Select>

View file

@ -3,6 +3,7 @@ import { user } from "../setup-tests";
import Select from "./Select.test.svelte"; import Select from "./Select.test.svelte";
import SelectGroup from "./Select.group.test.svelte"; import SelectGroup from "./Select.group.test.svelte";
import SelectSkeleton from "./Select.skeleton.test.svelte"; import SelectSkeleton from "./Select.skeleton.test.svelte";
import SelectFalsy from "./Select.falsy.test.svelte";
describe("Select", () => { describe("Select", () => {
beforeEach(() => { beforeEach(() => {
@ -238,4 +239,11 @@ describe("Select", () => {
expect(skeleton).toBeInTheDocument(); expect(skeleton).toBeInTheDocument();
expect(skeleton.children[0]).toHaveClass("bx--skeleton"); expect(skeleton.children[0]).toHaveClass("bx--skeleton");
}); });
it("renders value if `text` is falsy", () => {
render(SelectFalsy);
expect(screen.getByLabelText("Falsy text")).toHaveValue("-1");
expect(screen.getByDisplayValue("")).toBeInTheDocument();
});
}); });