next: add data-placeholder attribute to Select.Trigger (#778)

huntabyte · Oct 17, 2024 · 25712a6 · 25712a6
1 parent 6de27bc
commit 25712a6
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 0 deletions.
diff --git a/.changeset/mighty-lamps-breathe.md b/.changeset/mighty-lamps-breathe.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+Select: add `data-placeholder` to `Select.Trigger` when the select doesn't have a value
diff --git a/packages/bits-ui/src/lib/bits/select/select.svelte.ts b/packages/bits-ui/src/lib/bits/select/select.svelte.ts
@@ -669,6 +669,7 @@ class SelectTriggerState {
 				"aria-haspopup": "listbox",
 				"data-state": getDataOpenClosed(this.root.open.current),
 				"data-disabled": getDataDisabled(this.root.disabled.current),
+				"data-placeholder": this.root.hasValue ? undefined : "",
 				[this.root.bitsAttrs.trigger]: "",
 				onpointerdown: this.#onpointerdown,
 				onkeydown: this.#onkeydown,

diff --git a/packages/tests/src/tests/select/select.test.ts b/packages/tests/src/tests/select/select.test.ts
@@ -174,6 +174,16 @@ describe("select - single", () => {
 		expect(trigger).toHaveTextContent("B");
 	});
 
+	it("should have the placeholder attribute when empty and not when not empty", async () => {
+		const { user, trigger } = await openSingle();
+		trigger.focus();
+		expect(trigger).toHaveAttribute("data-placeholder");
+		await user.keyboard(kbd.ARROW_DOWN);
+		await user.keyboard(kbd.ENTER);
+		expect(trigger).toHaveTextContent("B");
+		expect(trigger).not.toHaveAttribute("data-placeholder");
+	});
+
 	it("should render an input if the `name` prop is passed", async () => {
 		const { getHiddenInput } = setupSingle();
 		expect(getHiddenInput()).toBeInTheDocument();
@@ -460,6 +470,19 @@ describe("select - multiple", () => {
 		expect(mockFn).toHaveBeenCalledWith("B");
 	});
 
+	it("should have the placeholder attribute when empty and not when not empty", async () => {
+		const mockFn = vi.fn();
+		const { user, trigger } = await openMultiple({
+			onSelectedLabelChange: mockFn,
+		});
+		trigger.focus();
+		expect(trigger).toHaveAttribute("data-placeholder");
+		await user.keyboard(kbd.ARROW_DOWN);
+		await user.keyboard(kbd.ENTER);
+		expect(mockFn).toHaveBeenCalledWith("B");
+		expect(trigger).not.toHaveAttribute("data-placeholder");
+	});
+
 	it("should render a hidden input if the `name` prop is passed", async () => {
 		const { getHiddenInputs } = setupMultiple();
 		expect(getHiddenInputs()).toHaveLength(1);

diff --git a/sites/docs/src/lib/content/api-reference/select.api.ts b/sites/docs/src/lib/content/api-reference/select.api.ts
@@ -275,6 +275,10 @@ export const trigger = createApiSchema<SelectTriggerPropsWithoutHTML>({
 	props: withChildProps({ elType: "HTMLButtonElement" }),
 	dataAttributes: [
 		stateDataAttr,
+		createDataAttrSchema({
+			name: "placeholder",
+			description: "Present when the select does not have a value.",
+		}),
 		createDataAttrSchema({
 			name: "disabled",
 			description: "Present when the select is disabled.",