[SalesForce] LWC – Extended lightning datatable with picklist is not working

I have use case where i need to show the values in the picklist format in lightning-datatable for which i am extending the lightning-datatable component.The datatable shows a drop-down box but i am not able to click it open to select the options in it.

I have even the value inside the combo box but it is just that i cannot open my combo-box to show the options.

Below is my code to extend the lightning-datatable;

datatablePickList.html

<template>
    <div class="picklist-container">
        <lightning-combobox name="picklist" label={label} value={value} placeholder={placeholder} options={options}
            onchange={handleChange}></lightning-combobox>
    </div>
</template>

datatablePickList.js

import { LightningElement, api } from 'lwc';

export default class DatatablePickList extends LightningElement {

    @api label;
    @api placeholder;
    @api options;
    @api value;
    @api context;

    connectedCallback(){
        console.log("Options is "+JSON.stringify(this.options));
        console.log("Value is "+JSON.stringify(this.value));
    }

    handleChange(event) {
        //show the selected value on UI
        this.value = event.detail.value;

        //fire event to send context and selected value to the data table
        this.dispatchEvent(new CustomEvent('picklistchanged', {
            composed: true,
            bubbles: true,
            cancelable: true,
            detail: {
                data: { context: this.context, value: this.value }
            }
        }));
    }


}

extendedLightningDatatable.js

import LightningDatatable from 'lightning/datatable';
import customRichtextControl from './customRichtextControl.html';
import deleteRow from './deleteRow.html';
import DatatablePicklistTemplate from "./picklist-template.html";

export default class ExtendedLightningDatatable extends LightningDatatable {
    static customTypes = {
        customRichtext: {
            template: customRichtextControl,
            standardCellLayout: false
        },  
        picklist: {
            template: DatatablePicklistTemplate,
            typeAttributes: ['label', 'placeholder', 'options', 'value'],
        },
    };
}

Component that uses the extendedLightningDatatable(template):

<template>
        <div style="height: auto;">
            <lightning-button label="+Add" onclick={addTableRow}></lightning-button>
            <c-extended-lightning-datatable 
                key-field="Id" 
                data={records} 
                columns={columns}
                onrowaction={handleRowAction} 
                onpicklistchanged={picklistChanged} 
                onvalueselect={handleSelection}
                oncellchange={handleCellChange}
                hide-checkbox-column="false"
                show-row-number-column="true"
                onsort={updateColumnSorting}
                sorted-by={sortBy}
                sorted-direction={sortDirection}
                row-number-offset ="0" 
                draft-values={draftValues}
                onsave={handleSave}
                >
            </c-extended-lightning-datatable>
        </div>
        <footer if:true={isLimitSet} class="slds-card__footer">
            <a href="javascript:void(0);">
                <span class="slds-align_absolute-center" onclick={handleViewAll}>View All</span>
            </a>
        </footer>
</template>

ExtendedLightningDatatable.html

<template>
    
</template>

Component that uses extendedLightningDatatable(LightningRelatedListDetail.html)

<template>
        <div style="height: 100%;">
            <lightning-button label="+Add" onclick={addTableRow}></lightning-button>
            <c-extended-lightning-datatable 
                key-field="Id" 
                data={records} 
                columns={columns}
                onrowaction={handleRowAction} 
                onpicklistchanged={picklistChanged} 
                onvalueselect={handleSelection}
                oncellchange={handleCellChange}
                hide-checkbox-column="false"
                show-row-number-column="true"
                onsort={updateColumnSorting}
                sorted-by={sortBy}
                sorted-direction={sortDirection}
                row-number-offset ="0" 
                draft-values={draftValues}
                onsave={handleSave}
                >
            </c-extended-lightning-datatable>
        </div>
        <footer if:true={isLimitSet} class="slds-card__footer">
            <a href="javascript:void(0);">
                <span class="slds-align_absolute-center" onclick={handleViewAll}>View All</span>
            </a>
        </footer>
</template>

LightningRelatedListHeader.html

<template>
<template if:true={isShowRelatedList}>
        <lightning-card>
            <article class="slds-card slds-card_boundary headerBottomBorder forceRelatedListCardDesktop">
                <div class="slds-grid slds-page-header forceRelatedListCardHeader">
                    <header class="slds-media slds-media_center slds-has-flexi-truncate">
                        <div class="slds-media__figure">
                            <lightning-icon icon-name={objectIconName} size="small">
                            </lightning-icon>
                        </div>
                        <div class="slds-media__body">
                            <h2 class="slds-card__header-title">
                                <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title={objectPluralLabel}>
                                    <span>{objectPluralLabel} {recordCount}</span>
                                </a>
                            </h2>
                        </div>
                        <div class="slds-no-flex">
                            <lightning-button-icon variant="border-filled" icon-name="utility:refresh" alternative-text="Refresh" title="Refresh" onclick={handleRefresh}>
                            </lightning-button-icon>
                            <template if:false={isNewDisabled}>   
                                    <lightning-button
                                        label="New"
                                        onclick={createNewRecord}>
                                    </lightning-button>
                                </template>
                        </div>
                    </header>
                </div>
                
                <div>
                    <c-lightning-related-list-detail child-object-api-name={childObjectApiName} 
                                                     field-set-api-name={fieldSetApiName}   
                                                    child-object-fields={childObjectFields} child-object-richtext-fields={childObjectrRichtextFields}   
                                                    parent-field-api-name={parentFieldAPIName}
                                                    parent-record-id={recordId} 
                                                    records-filter-logic={relatedListRecordsFilterLogic} 
                                                    is-edit-disabled={isEditDisabled} 
                                                    is-delete-disabled={isDeleteDisabled}
                                                    no-of-initial-records-load={noOfInitialRecordsLoad}
                                                    record-name={recordName}
                                                   >

                    </c-lightning-related-list-detail>
                </div>
        </article>
    </lightning-card>

        <!-- create Record Component-->
        <template if:true={createRecordOpen}>
            
            <template if:true={recordTypeSelector}>
                <div >
                    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                        <div class="slds-modal__container">
                            <header class="slds-modal__header">
                                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
                                    <lightning-button-icon icon-name="utility:close" variant="bare-inverse" size="large" onclick={closeModal}></lightning-button-icon>
                                    <span class="slds-assistive-text">Close</span>
                                </button>
                                <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">New {objLabelName}</h2>
                            </header>
                            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                                <div class="slds-radio_faux slds-radio__label">
                                <lightning-radio-group name="Record Type"
                                                    label="Record Type"
                                                    value={recordTypeId}
                                                    options={recordTypeOptions}
                                                    variant="label-inline"
                                                    type="radio"
                                                    onchange={handleRecTypeChange}>
                                </lightning-radio-group>
                                </div>
                            </div>
                            <footer class="slds-modal__footer">
                                <lightning-button label="Cancel" onclick={closeModal}></lightning-button>
                                <lightning-button label="Next" onclick={createRecordMain} variant="brand"></lightning-button>
                            </footer>
                        </div>
                    </section>
                    <div class="slds-backdrop slds-backdrop_open"></div>
                </div>
            </template>
            
            <template if:true={mainRecord}>
                    <div>
                        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                            <div class="slds-modal__container">
                                <header class="slds-modal__header">
                                    <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
                                        <lightning-button-icon icon-name="utility:close" variant="bare-inverse" size="large" onclick={closeModal}></lightning-button-icon>
                                        <span class="slds-assistive-text">Close</span>
                                    </button>
                                    <h2 id="modal-heading-02" class="slds-text-heading_medium slds-hyphenate">New {recordName}</h2>
                                </header>
                                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-2">
                                        <lightning-record-form
                                         class="recordForm"
                                            object-api-name={childObjectApiName}
                                            record-type-id={recordTypeId}
                                            layout-type="Compact"
                                            columns="2"
                                            density="comfy"
                                            onerror={handleError}
                                            onsuccess={handleSuccess}
                                            oncancel={closeModal}
                                            onsubmit={handleSubmit}>
                                        </lightning-record-form>  
                                </div>
                            </div>
                        </section>
                        <div class="slds-backdrop slds-backdrop_open"></div>
                    </div>
            </template>
        </template>
   </template>
</template>

Let me know how to solve this issue.