From be8f9b62dbab28974f84c438a27d26880abb5e7a Mon Sep 17 00:00:00 2001
From: Luis Felipe Zaguini <26530524+zaguiini@users.noreply.github.com>
Date: Tue, 17 Sep 2024 09:17:05 -0300
Subject: [PATCH] Combobox Control: Add placeholder attribute (#65254)

* Combobox Control: Add placeholder attribute

* Remove placeholder from default story

* Change placeholder type description and add it to README

* Add CHANGELOG entry
---
 packages/components/CHANGELOG.md                   | 1 +
 packages/components/src/combobox-control/README.md | 7 +++++++
 packages/components/src/combobox-control/index.tsx | 2 ++
 packages/components/src/combobox-control/types.ts  | 4 ++++
 4 files changed, 14 insertions(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 2f9f0fd03458ec..8d9ee39833577b 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -15,6 +15,7 @@
 ### New Features
 
 -   `Composite`: add stable version of the component ([#63569](https://github.com/WordPress/gutenberg/pull/63569)).
+-   `ComboboxControl`: add support for `placeholder` attribute ([#65254](https://github.com/WordPress/gutenberg/pull/65254)).
 
 ### Enhancements
 
diff --git a/packages/components/src/combobox-control/README.md b/packages/components/src/combobox-control/README.md
index 61611f82fee233..5831c5ec2832c2 100644
--- a/packages/components/src/combobox-control/README.md
+++ b/packages/components/src/combobox-control/README.md
@@ -111,6 +111,13 @@ If the control is clicked, the dropdown will expand regardless of this prop.
 -   Required: No
 -   Default: `true`
 
+### placeholder
+
+If passed, the combobox input will show a placeholder string if no values are present.
+
+-   Type: `string`
+-   Required: No
+
 #### __experimentalRenderItem
 
 Custom renderer invoked for each option in the suggestion list. The render prop receives as its argument an object containing, under the `item` key, the single option's data (directly from the array of data passed to the `options` prop).
diff --git a/packages/components/src/combobox-control/index.tsx b/packages/components/src/combobox-control/index.tsx
index fc3ecccf0b6599..5c6725a51b435d 100644
--- a/packages/components/src/combobox-control/index.tsx
+++ b/packages/components/src/combobox-control/index.tsx
@@ -129,6 +129,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 		},
 		__experimentalRenderItem,
 		expandOnFocus = true,
+		placeholder,
 	} = useDeprecated36pxDefaultSizeProp( props );
 
 	const [ value, setValue ] = useControlledValue( {
@@ -340,6 +341,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 								className="components-combobox-control__input"
 								instanceId={ instanceId }
 								ref={ inputContainer }
+								placeholder={ placeholder }
 								value={ isExpanded ? inputValue : currentLabel }
 								onFocus={ onFocus }
 								onBlur={ onBlur }
diff --git a/packages/components/src/combobox-control/types.ts b/packages/components/src/combobox-control/types.ts
index 10adf8c0ff0ef6..470b38c35e2c8a 100644
--- a/packages/components/src/combobox-control/types.ts
+++ b/packages/components/src/combobox-control/types.ts
@@ -82,4 +82,8 @@ export type ComboboxControlProps = Pick<
 	 * The current value of the control.
 	 */
 	value?: string | null;
+	/**
+	 * If passed, the combobox input will show a placeholder string if no values are present.
+	 */
+	placeholder?: string;
 };