Help with text overflow in Select component for long CIIU options

[NelsonS]

👋 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} />

[Bortami · Accepted solution]

Hi @NelsonS,

The dropdown width is set by your longest label in the options array. The component doesn't offer wordbreak or overflow options. (https://developers.hubspot.com/docs/reference/ui-components/standard-components/select)

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" }
]

[BérangèreL]

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! ⭐

Best,
Bérangère