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) => void; id: string; value?: HTMLInputElement["value"]; + placeholder?: string; } export const GrowingInput = React.forwardRef( - ({ 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 { event.preventDefault(); 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 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 = () => { -> - + <- 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);