fix(combobox): placeholder cropping in Multiselect Combobox (#3540)

* fix(combobox): placeholder cropping in multiselect * fix: only show placeholder when there are no selectedItems
twilio-labs · Oct 12, 2023 · c58b3bf · c58b3bf
1 parent 1a70ec0
commit c58b3bf
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 3 deletions.
diff --git a/.changeset/sour-knives-design.md 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
@@ -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/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`}
             />

diff --git 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
@@ -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);