Lightning Datatable : Multiple Editable columns doesn't work when both custom types and standard types are present

Hello,

I have a lightning datatable where I have introduced a new custom type "customPicklist" for the column. Now when I declare the LeadSource column as customtype as editable and picklist field shows as editable and works fine. But for the type "text" for other columns, i.e Email it is not editable. I have attached screenshot at the end. Is there an issue in the code or the data table wont work as editable due to use of both standard and custom types ? Any guidance would help. Thanks!

myCustomTypeDataTable.js

import picklistColumn from './picklistColumn.html';

 static customTypes = {

        customPicklist: {

          template: picklistColumn,

          standardCellLayout: true,

          typeAttributes: ['label', 'placeholder', 'options', 'value']

        }

picklistColumn.html

<template>

    <lightning-combobox name="picklist" data-inputable="true" label={typeAttributes.label} value={typeAttributes.value} placeholder={typeAttributes.placeholder} options={typeAttributes.options} 

        dropdown-alignment="auto"></lightning-combobox>

</template>

•  In my main component, I  also have standard types along with the custom type to be used as editable field.

contactList.js 

const COLUMNS = [

    { label: 'First Name', fieldName: FIRSTNAME_FIELD.fieldApiName, type: 'text' },

    { label: 'Last Name', fieldName: LASTNAME_FIELD.fieldApiName, type: 'text' },

    { label: 'Email', fieldName: EMAIL_FIELD.fieldApiName, type: 'text', editable:true, wrapText:true },

    { label: 'LeadSource', fieldName: 'LeadSource', type: 'customPicklist', editable: true, wrapText:true, typeAttributes: {

            placeholder: 'Choose Type', options: [

                { label: 'Web', value: 'Web' },

                { label: 'Other', value: 'Other' },

            ], 

            value: { fieldName: 'LeadSource' } // default value for picklist,

        }

    }

];

contactList.html

 <c-my-custom-type-data-table

           key-field="Id"

           data={contacts.data}

           columns={columns}>

           </c-my-custom-type-data-table>

Additional Context

Since I am using the customtypes, I have to use the above tag instead of <lightning-datatable> . If I use the standard lightning datatable, the text type fields becomes editable as expected.

Component:

#Salesforce Developer  #Lightning Web Components  #Datatable  #Customer Type