Event not getting fired from a lwc custom lookup component

Question

I have used a custom lightning datatable which has a component displayed as a lookup

customLightningDatatable.html

 import LightningDatatable from 'lightning/datatable';
 import lookupTemplate from './lookupTemplate.html';

 export default class CustomLightningDatatable extends LightningDatatable {
     static customTypes = {
          fileUpload: {
             template: fileUploadTemplate,
             typeAttributes: ['acceptedFormats'],
          },
          lookup: {
             template: lookupTemplate,
          }
      };    
   }

Code for the lookupTemplate.html which has been imported

  <template>
   <c-customlwclookup object-name="Account" field-name="Name"
    parentidfield="AccountId"
    iconname="standard:account"
    parent-record-id = {value}
    onaccountselection = {handleAccountChange}
    class="childComponent">
   </c-customlwclookup>
</template>

lookupTemplate.js

   import { LightningElement } from 'lwc';

   export default class lookupTemplate extends LightningElement {
       handleAccountChange(event) {
           console.log('here !!!');
           var AccountId = event.detail.selectedRecordIdValue;
           console.log("AccountId ::: "+AccountId);
       }   
   }

My problem here is that, my custom lwc lookup component has an event which gets fired every time a lookup value is selected

    handleSelect(event) {
    var selectedVal = event.detail.selRec;
    this.selectedRecord =  selectedVal;

    const selectedEvent = new CustomEvent('accountselection', {
        detail : { selectedRecordIdValue : this.selectedRecord.Id}
    });
    this.dispatchEvent(selectedEvent);
} 

However, the handleAccountChange method is not getting called.

I am not sure why.

Answer 1

I believe CustomLightningDatatable is grand-parent of customlwclookup. Try dispatching the event with bubbles & composed property set to true,

    this.dispatchEvent(new CustomEvent('accountselection', {
        bubbles: true,
        composed: true,
        detail : { selectedRecordIdValue : this.selectedRecord.Id}
    }));

I saw you've attached the listener handler to lookupTemplate. It should be on CustomLightningDatatable

<c-custom-lightning-datatable key-field="textCol" columns={columns} data={tableData} wrap-text-max-lines="3" onaccountselection={handleSelection}>
    </c-custom-lightning-datatable>