Rating question used inside a Custom Component - The displayMode: aut… (

#6932)

* Rating question used inside a Custom Component - The displayMode: auto doesn't work and rate options overflow the question area fix #6915

* Fix functional test#6915

* Remove waiting from functional test #6915

src/knockout/templates/question-custom.html

@@ -1,4 +1,10 @@
 <script type="text/html" id="survey-question-custom">
-  <!-- ko template: { name: question.contentQuestion.koTemplateName(), data: question.contentQuestion, as: 'question', afterRender: question.contentQuestion.koQuestionAfterRender } -->
-  <!-- /ko -->
+    <!-- ko if: question.contentQuestion.isDefaultRendering() -->
+      <!-- ko template: { name: question.contentQuestion.koTemplateName(), data: question.contentQuestion, as: 'question', afterRender: question.contentQuestion.koQuestionAfterRender } -->
+      <!-- /ko -->
+    <!-- /ko -->
+    <!-- ko ifnot: question.contentQuestion.isDefaultRendering() -->
+      <!-- ko component: { name: question.contentQuestion.getComponentName(), params: { question: question.contentQuestion } } -->
+      <!-- /ko -->
+    <!-- /ko -->
 </script>

src/question_custom.ts

@@ -649,6 +649,12 @@ export class QuestionCustomModel extends QuestionCustomModelBase {
       super.focus(onError);
     }
   }
+  public afterRender(el: any): void {
+    super.afterRender(el);
+    if (!!this.contentQuestion) {
+      this.contentQuestion.afterRender(el);
+    }
+  }
   public get contentQuestion(): Question {
     return this.questionWrapper;
   }

testCafe/survey/custom_components.ts

@@ -0,0 +1,54 @@
+import { url_test, initSurvey, getSurveyResult, frameworks, explicitErrorHandler } from "../helper";
+import { Selector, ClientFunction } from "testcafe";
+const title = "Custom Components";
+const themeName = "defaultV2";
+const json = {
+  "elements": [
+    {
+      type: "nps",
+      name: "q1"
+    }
+  ]
+};
+
+const registerNPSComponet = ClientFunction(() => {
+  window["Survey"].ComponentCollection.Instance.add({
+    //Unique component name. It becomes a new question type. Please note, it should be written in lowercase.
+    name: "nps", //The text that shows on toolbox
+    title: "NPS Rating", //The actual question that will do the job
+    questionJSON: {
+      type: "rating",
+      rateValues: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+      minRateDescription: "Very unlikely",
+      maxRateDescription: "Very likely",
+      displayMode: "auto"
+    }
+  });
+});
+
+frameworks.forEach(framework => {
+  fixture`${framework} ${title}`.page`${url_test}${themeName}/${framework}`.beforeEach(
+    async t => {
+    }
+  );
+  test("Show rating in component as dropdown", async t => {
+    const questionDropdownSelect = Selector(".sd-input.sd-dropdown");
+    await explicitErrorHandler();
+    await t.resizeWindow(500, 600);
+    await registerNPSComponet();
+    await initSurvey(framework, json);
+
+    await t
+      .click(questionDropdownSelect)
+      .pressKey("down")
+      .pressKey("down")
+      .pressKey("down")
+      .pressKey("down")
+      .pressKey("enter");
+
+    await t.click(Selector("input[value='Complete']"));
+
+    const surveyResult = await getSurveyResult();
+    await t.expect(surveyResult.q1).eql(3);
+  });
+});