Lwc: lightning-combobox does not work in custom lightning-datatable

[jinlii]

custom class
export default class TestDataTable extends LightningDatatable { }

custom template :

<template>
        <lightning-combobox
                name="progress"
                label="Status"
                value={value}
                placeholder="Select Progress"
                options={options}
                onchange={handleChange} ></lightning-combobox>

        <p>Selected value is: {value}</p>
    </template>

The template shows the dropdown correctly in a standalone component. But when included in the column template for the column in TestDataTable, it only shows the selection. When you click on the dropdown, nothing happens. The picklist values however are in the DOM when you inspect.

Is this a known bug?

Thanks!

[caridy]

This is probably on the lightning global components, not on LWC directly. cc @garazi @reiniergs

[russellsmall-litify]

I've found that the reason for this is each cell has a div with slds-truncate applied, which provides Overflow: hidden. This hides the drop down of the combobox. Removing this style allows the drop down to function properly, but I don't have a workaround yet.

[caridy]

/cc @gonzalocordero

[alucidwolf]

Even if you add a class to the <td> and then overwrite the .slds-truncate styles, the dropdown still does not show outside of the table

[nyaghoub]

I was able to get it to work by following this example. Couple of things to note to make it work. The CSS has to get added in the static resource in your org and then reference it in the js that extend the lightningTable. Also, this will not work locally, you need to make sure you deploy your code and then test it in the sandbox. I hope this will help others.

[bharvie]

After much frustration on this, discovered a simple workaround is to force wrapping on the column definition (wrapText: true - you will need to show the default header actions for it to work).