The ICustomQuestionTypeConfiguration.onAfterRender event is not raise…

…d when a custom component is being used as a Dynamic Matrix column fix #7022

packages/survey-angular-ui/src/questions/matrixcell.component.ts

@@ -74,14 +74,17 @@ export class MatrixCellComponent extends BaseAngular<Question> {
   }
   ngAfterViewInit() {
     if (!this.cell.hasQuestion || !this.question || !this.question.survey) return;
+    const el = this.cellContainer.nativeElement;
+    const cellQ = this.cell.question;
     var options = {
       cell: this.cell.cell,
-      cellQuestion: this.cell.question,
-      htmlElement: this.cellContainer.nativeElement,
+      cellQuestion: cellQ,
+      htmlElement: el,
       row: this.cell.row,
       column: this.cell.cell.column,
     };
     this.question.survey.matrixAfterCellRender(this.question, options);
+    cellQ.afterRenderCore(el);
   }
   override ngOnDestroy(): void {
     super.ngOnDestroy();

packages/survey-vue3-ui/src/MatrixCell.vue

@@ -104,13 +104,18 @@ onMounted(() => {
   props.cell.question.registerPropertyChangedHandlers(["isVisible"], () => {
     onVisibilityChanged();
   });
-  var options = {
+  const el = root.value;
+  const cQ = props.cell.question;
+  const options = {
     cell: props.cell.cell,
-    cellQuestion: props.cell.question,
-    htmlElement: root.value,
+    cellQuestion: cQ,
+    htmlElement: el,
     row: props.cell.row,
     column: props.cell.cell.column,
   };
   props.question.survey.matrixAfterCellRender(props.question, options);
+  if (cQ) {
+    cQ.afterRenderCore(el);
+  }
 });
 </script>

src/knockout/koquestion_matrixdropdown.ts

@@ -73,6 +73,9 @@ export class QuestionMatrixBaseImplementor extends QuestionImplementor {
         column: !!cell.cell ? cell.cell.column : null,
       };
       this.question.survey.matrixAfterCellRender(this.question, options);
+      if(cell.question) {
+        cell.question.afterRenderCore(el);
+      }
     }, 0);
   }
   private cellQuestionAfterRender(elements: any, con: any) {

src/question.ts

@@ -848,6 +848,7 @@ export class Question extends SurveyElement<Question>
     this.survey.afterRenderQuestionInput(this, el);
   }
   public afterRender(el: HTMLElement): void {
+    this.afterRenderCore(el);
     if (!this.survey) return;
     this.survey.afterRenderQuestion(this, el);
     if (!!this.afterRenderQuestionCallback) {
@@ -865,6 +866,8 @@ export class Question extends SurveyElement<Question>
     }
     this.checkForResponsiveness(el);
   }
+  public afterRenderCore(el: HTMLElement): void {
+  }
   protected getCommentElementsId(): Array<string> {
     return [this.commentId];
   }

src/question_custom.ts

@@ -472,8 +472,8 @@ export abstract class QuestionCustomModelBase extends Question
   public afterRenderQuestionElement(el: HTMLElement) {
     //Do nothing
   }
-  public afterRender(el: any) {
-    super.afterRender(el);
+  public afterRenderCore(el: any): void {
+    super.afterRenderCore(el);
     if (!!this.customQuestion) {
       this.customQuestion.onAfterRender(this, el);
     }
@@ -656,8 +656,8 @@ export class QuestionCustomModel extends QuestionCustomModelBase {
       super.focus(onError);
     }
   }
-  public afterRender(el: any): void {
-    super.afterRender(el);
+  public afterRenderCore(el: any): void {
+    super.afterRenderCore(el);
     if (!!this.contentQuestion) {
       this.contentQuestion.afterRender(el);
     }

src/react/reactquestion_matrixdropdownbase.tsx

@@ -316,7 +316,7 @@ export class SurveyQuestionMatrixDropdownCell extends SurveyQuestionAndErrorsCel
     if (!!q) return q;
     return !!this.cell ? this.cell.question : null;
   }
-  protected doAfterRender() {
+  protected doAfterRender(): void {
     var el = this.cellRef.current;
     if (
       el &&
@@ -326,14 +326,15 @@ export class SurveyQuestionMatrixDropdownCell extends SurveyQuestionAndErrorsCel
       el.getAttribute("data-rendered") !== "r"
     ) {
       el.setAttribute("data-rendered", "r");
-      var options = {
+      const options = {
         cell: this.cell,
         cellQuestion: this.question,
         htmlElement: el,
         row: this.cell.row,
         column: this.cell.cell.column,
       };
       this.question.survey.matrixAfterCellRender(this.question, options);
+      this.question.afterRenderCore(el);
     }
   }
   protected getShowErrors(): boolean {

src/vue/matrixcell.vue

@@ -99,14 +99,19 @@ export class MatrixCell extends Vue {
     this.cell.question.registerPropertyChangedHandlers(["isVisible"], () => {
       this.onVisibilityChanged();
     });
-    var options = {
+    const cQ = this.cell.question; 
+    const el: any = this.$el;
+    const options = {
       cell: this.cell.cell,
-      cellQuestion: this.cell.question,
-      htmlElement: this.$el,
+      cellQuestion: cQ,
+      htmlElement: el,
       row: this.cell.row,
       column: this.cell.cell.column,
     };
     this.question.survey.matrixAfterCellRender(this.question, options);
+    if (cQ) {
+      cQ.afterRenderCore(el);
+    }
   }
   private onVisibilityChanged() {
     this.isVisible = this.cell.question.isVisible;

testCafe/questions/component_single_question.ts

@@ -27,9 +27,16 @@ const createComponent = ClientFunction(() => {
       type: "dropdown",
       choices: ["a", "b", "c"],
     },
+    onAfterRender: (question, htmlElement) => {
+      window["newquestion_afterrender"] = question.name;
+    }
   });
 });
 
+const getAfterRenderResult = ClientFunction(() => {
+  return window["newquestion_afterrender"];
+});
+
 frameworks.forEach((framework) => {
   fixture`${framework} ${title}`.page`${url}${framework}`;
 
@@ -53,4 +60,10 @@ frameworks.forEach((framework) => {
     const surveyResult = await getSurveyResult();
     await t.expect(surveyResult.matrix[0].col1).eql("b");
   });
+  test("Component as a cell question & afterRender", async (t) => {
+    await createComponent();
+    await initSurvey(framework, json_matrix);
+    const res = await getAfterRenderResult();
+    await t.expect(res).eql("col1");
+  });
 });