Help with text overflow in Select component for long CIIU options

Developer Support CMS Development
1

:waving_hand: Hey team! Need some help with text overflow in a Select component

Current Behavior:
- Using a Select component from [library name] for CIIU options
- Long option labels are causing overflow issues despite using overflow and word break properties

Current Implementation:
<Select
label=“CIIU a suscribir”
placeholder=“Seleccione CIIU”
value={ciiu}
onChange={(value) => setCiiu(value)}
required={true}
options={ciiuOptions} />

1108390_1_CIIU.png
1108390_1_CIIU.png1341Ă—378 21.2 KB

2

Hi @NelsonS, I hope that you are well!
Thanks for asking the HubSpot Community!
I’d love to put you in touch with some of our Top Experts: Hi @sylvain_tirreau, @zach_threadint and @Bortami do you have suggestions to help @NelsonS, please?
Have a great day and thanks so much! :star:
Best,
Bérangère

3

Hi @NelsonS,

The dropdown width is set by your longest label in the options array. The component doesn’t offer wordbreak or overflow options. (Accounts Dashboard | HubSpot)

You may want to truncate the labels in the array to a consistent length before passing the array to the component.

//truncating function
const truncateLabels = (options) => {
 return options.map(item => ({
 ...item,
 label: item.label.length > 10 ? item.label.slice(0, 10) + '...' : item.label
 }));
};

// Sample input array
const inputArray = [
 { label: "really long label name", value: "really long value" },
 { label: "short", value: "short value" },
 { label: "another long label", value: "another long value" }
];

//Sample output array
const outputArray = [
 { label: "really lon...", value: "really long value" },
 { label: "short", value: "short value" },
 { label: "another lo...", value: "another long value" }
]