[SalesForce] how to wrap combo-box options text in LWC

I have a below combobox in the HTML:

<lightning-layout>
        <lightning-layout-item>
            <lightning-combobox class="slds-cell-wrap slds-text" label="combo-box" options={comboOptions}>
            </lightning-combobox>
        </lightning-layout-item>
</lightning-layout>

JS:

comboOptions = [{ value: 'This is a very very long label', label: 'This is a very very long label' },
{ value: 'This is a very very long label', label: 'This is a very very long label' },
{ value: 'This is a very very long label', label: 'This is a very very long label' },
{ value: 'This is a very very long label', label: 'This is a very very long label' },
{ value: 'This is a very very long label', label: 'This is a very very long label' },
];

it renders like below:

enter image description here

If the option string is longer then it truncates the string, I tried using slds-cell-wrap but still options are being truncated instead of wrapping, could someone please suggest how to wrap the combobox options.

Update
using below component from the lightning base component recipe doesn't have an option property instead tried to set items property but it shows something like below

enter image description here

Please confirm if is there any way to wrap the option text of combobox

Best Answer

Consider building a custom combobox component, if you need text wrapping. Easiest approach would be to create a replica of the base components involved. You can check out the source code here for baseCombobox & baseComboboxItem components. A one line code change (i.e., remove the slds-truncate) in your replicated custom component's inline.html file of baseComboboxItem should work. Note that I've personally not tried this out, but should be possible.

You cannot use class attribute (CSS) on the LWC base component (combobox) or unless SF provides a new attribute (or some kind of variant). Reason being,

  1. CSS styles defined in a parent component don’t leak into a child (ref)
  2. Don’t depend on the internal markup or CSS classes of a base Lightning component as they can change in future releases. You can’t override the style for a base Lightning component (ref)
  3. Base components provide a class attribute so that you can add a utility class or custom class to the outer elements of the components (ref)

As mentioned in point # 3, the slds you specify in class attribute doesn't get applied to the inner elements of the component.

Combobox would get rendered something like this in chrome (below HTML shows only for one element). Note that innermost span element has the slds-truncate which causes option labels to get truncated. Point # 2 mentioned above recommends not to depend on this current HTML structure for styling.

<div lightning-basecombobox_basecombobox="" id="dropdown-element-341" data-dropdown-element="true" role="listbox" class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid slds-dropdown_left">
    <lightning-base-combobox-item lightning-basecombobox_basecombobox="" data-item-id="input-341-0" data-value="This is a very very long label" role="option" id="input-341-0-341" class="slds-media slds-listbox__option slds-media_center slds-media_small slds-listbox__option_plain" aria-selected="false">
        <span class="slds-media__figure slds-listbox__option-icon"></span>
        <span class="slds-media__body">
            <span title="This is a very very long label" class="slds-truncate">This is a very very long label</span>
        </span>
    </lightning-base-combobox-item>
</div>
Related Topic