diff --git a/src/components/MultiSelect/MultiSelect.scss b/src/components/MultiSelect/MultiSelect.scss index a6f82151..21e6044a 100644 --- a/src/components/MultiSelect/MultiSelect.scss +++ b/src/components/MultiSelect/MultiSelect.scss @@ -89,6 +89,7 @@ $dropdown-max-height: 20rem; &, .p-checkbox { + max-width: 100%; width: 100%; } } diff --git a/src/components/MultiSelect/MultiSelect.stories.tsx b/src/components/MultiSelect/MultiSelect.stories.tsx index 1ad83f59..b4831dab 100644 --- a/src/components/MultiSelect/MultiSelect.stories.tsx +++ b/src/components/MultiSelect/MultiSelect.stories.tsx @@ -43,6 +43,19 @@ export const CondensedExample: Story = { ...Array.from({ length: 26 }, (_, i) => ({ label: `${String.fromCharCode(i + 65)}`, value: `${String.fromCharCode(i + 65)}`, + node: ( + + {String.fromCharCode(i + 65)} + 20 instances + + ), })), ...Array.from({ length: 26 }, (_, i) => ({ label: `Item ${i + 1}`, diff --git a/src/components/MultiSelect/MultiSelect.tsx b/src/components/MultiSelect/MultiSelect.tsx index b889291a..a0fa22b3 100644 --- a/src/components/MultiSelect/MultiSelect.tsx +++ b/src/components/MultiSelect/MultiSelect.tsx @@ -10,6 +10,7 @@ import { FadeInDown } from "./FadeInDown"; export type MultiSelectItem = { label: string; value: string | number; + node?: ReactNode; group?: string; }; @@ -190,7 +191,7 @@ export const MultiSelectDropdown: React.FC = ({ >