From 3a6cd568571b25c2ce3ed0c28032cba846abe55a Mon Sep 17 00:00:00 2001
From: TheSisb <shadiisber@gmail.com>
Date: Tue, 10 Oct 2023 14:58:27 -0500
Subject: [PATCH 1/2] fix(combobox): placeholder cropping in multiselect

---
 .changeset/sour-knives-design.md                            | 6 ++++++
 .../components/combobox/src/multiselect/GrowingInput.tsx    | 6 ++++--
 .../components/combobox/stories/GrowingInput.stories.tsx    | 2 +-
 .../combobox/stories/MultiselectCombobox.stories.tsx        | 1 +
 4 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/sour-knives-design.md

diff --git a/.changeset/sour-knives-design.md b/.changeset/sour-knives-design.md
new file mode 100644
index 0000000000..a70c8c10b4
--- /dev/null
+++ b/.changeset/sour-knives-design.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/combobox": patch
+"@twilio-paste/core": patch
+---
+
+[Combobox] Fix `placeholder` cropping issue in MultiselectCombobox
diff --git a/packages/paste-core/components/combobox/src/multiselect/GrowingInput.tsx b/packages/paste-core/components/combobox/src/multiselect/GrowingInput.tsx
index e13338fbf6..2c6d1703c9 100644
--- a/packages/paste-core/components/combobox/src/multiselect/GrowingInput.tsx
+++ b/packages/paste-core/components/combobox/src/multiselect/GrowingInput.tsx
@@ -9,10 +9,11 @@ interface GrowingInputProps {
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   id: string;
   value?: HTMLInputElement["value"];
+  placeholder?: string;
 }
 
 export const GrowingInput = React.forwardRef<HTMLInputElement, GrowingInputProps>(
-  ({ element = "GROWING_INPUT", onChange, initialValue = "", value, ...props }, ref) => {
+  ({ element = "GROWING_INPUT", onChange, initialValue = "", value, placeholder = "", ...props }, ref) => {
     const [text, setText] = React.useState(value || initialValue);
 
     React.useEffect(() => {
@@ -42,7 +43,7 @@ export const GrowingInput = React.forwardRef<HTMLInputElement, GrowingInputProps
         height="28px"
         alignContent="center"
         _after={{
-          content: `"${text}"`,
+          content: `"${text || placeholder || ""}"`,
           fontFamily: "inherit",
           fontSize: "fontSize30",
           fontWeight: "fontWeightMedium",
@@ -58,6 +59,7 @@ export const GrowingInput = React.forwardRef<HTMLInputElement, GrowingInputProps
           element={element}
           type="text"
           value={value != null ? value.replace(/  +/g, " ") : text}
+          placeholder={placeholder}
           padding="space0"
           onChange={(event) => {
             event.preventDefault();
diff --git a/packages/paste-core/components/combobox/stories/GrowingInput.stories.tsx b/packages/paste-core/components/combobox/stories/GrowingInput.stories.tsx
index 7941947990..d8e5444bb1 100644
--- a/packages/paste-core/components/combobox/stories/GrowingInput.stories.tsx
+++ b/packages/paste-core/components/combobox/stories/GrowingInput.stories.tsx
@@ -14,7 +14,7 @@ export const GrowingInputDemo: StoryFn = () => {
       <Label htmlFor={id}>Type in here:</Label>
       <Box display="flex" alignItems="center">
         <span> -&gt; </span>
-        <GrowingInput id={id} />
+        <GrowingInput id={id} placeholder="Long placeholder text with extra   long spaces    ." />
         <span> &lt;- </span>
       </Box>
     </>
diff --git a/packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx b/packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx
index 1c9eff5afc..face3ee2e9 100644
--- a/packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx
+++ b/packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx
@@ -77,6 +77,7 @@ export const BottomOfScreen = (): React.ReactNode => {
         labelText="Choose a Paste Component"
         selectedItemsLabelText="Selected Paste components"
         helpText="Paste components are the building blocks of your product UI."
+        placeholder="Search by SID or name"
         items={filteredItems}
         onInputValueChange={({ inputValue: newInputValue = "" }) => {
           setInputValue(newInputValue);

From 9b4b7159bd98297f5b3ae9e82b10eb12c20463bc Mon Sep 17 00:00:00 2001
From: TheSisb <shadiisber@gmail.com>
Date: Wed, 11 Oct 2023 09:11:05 -0500
Subject: [PATCH 2/2] fix: only show placeholder when there are no
 selectedItems

---
 .../components/combobox/src/multiselect/MultiselectCombobox.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/paste-core/components/combobox/src/multiselect/MultiselectCombobox.tsx b/packages/paste-core/components/combobox/src/multiselect/MultiselectCombobox.tsx
index cdb512eedf..911324b43c 100644
--- a/packages/paste-core/components/combobox/src/multiselect/MultiselectCombobox.tsx
+++ b/packages/paste-core/components/combobox/src/multiselect/MultiselectCombobox.tsx
@@ -32,6 +32,7 @@ export const MultiselectCombobox = React.forwardRef<HTMLInputElement, Multiselec
       initialSelectedItems = [],
       disabledItems,
       inputValue,
+      placeholder,
       insertAfter,
       insertBefore,
       items,
@@ -355,6 +356,7 @@ export const MultiselectCombobox = React.forwardRef<HTMLInputElement, Multiselec
                 disabled,
                 onKeyDown: handleKeyDown,
               })}
+              placeholder={selectedItems.length === 0 ? placeholder : ""}
               aria-describedby={helpTextId}
               element={`${element}_ELEMENT`}
             />