Dropdown in Read-Only Mode - Render a Custom Component (#11162)

* Dropdown in Read-Only Mode - Render a Custom Component

* Add etalon

Author: JaneSjs

packages/survey-angular-ui/src/components/dropdown/dropdown.component.html

@@ -48,7 +48,11 @@
         [attr.aria-labelledby]="dropdownModel?.ariaQuestionLabelledby"
         [attr.aria-describedby]="dropdownModel?.ariaQuestionDescribedby" [attr.aria-expanded]="false"
         [attr.aria-readonly]="true" [attr.aria-disabled]="true">
-        <div *ngIf="model.readOnlyText" [class]="model.cssClasses.controlValue">
+        <div *ngIf="model.showInputFieldComponent" [class]="model.cssClasses.controlValue">
+            <ng-template
+                [component]="{ name: model.inputFieldComponentName, data: { model: dropdownModel.getSelectedAction(), question: model } }"></ng-template>
+        </div>
+        <div *ngIf="!model.showInputFieldComponent && model.readOnlyText" [class]="model.cssClasses.controlValue">
             <sv-ng-string [model]="model.locReadOnlyText"></sv-ng-string>
         </div>
         <sv-ng-action-bar [model]="dropdownModel.editorButtons"></sv-ng-action-bar>

packages/survey-react-ui/src/dropdown-base.tsx

@@ -41,13 +41,17 @@ export class SurveyQuestionDropdownBase<T extends Question> extends SurveyQuesti
     return this.questionBase.renderedValue;
   }
   protected renderReadOnlyElement(): React.JSX.Element | null {
+    if (this.question.showInputFieldComponent) {
+      return (<div className={this.question.cssClasses.controlValue}>
+        {this.renderValueElement()}
+      </div>);
+    }
     if (this.question.readOnlyText) {
       return (<div className={this.question.cssClasses.controlValue}>
         {this.renderLocString(this.question.locReadOnlyText)}
       </div>);
-    } else {
-      return null;
     }
+    return null;
   }
   protected renderSelect(cssClasses: any): React.JSX.Element {
     let selectElement: React.JSX.Element | null = null;
@@ -85,7 +89,9 @@ export class SurveyQuestionDropdownBase<T extends Question> extends SurveyQuesti
 
   renderValueElement(): React.JSX.Element | null {
     if (this.question.showInputFieldComponent) {
-      return ReactElementFactory.Instance.createElement(this.question.inputFieldComponentName, { item: this.dropdownListModel.getSelectedAction(), question: this.question });
+      const listModel = this.dropdownListModel;
+      const actionItem = !!listModel ? listModel.getSelectedAction() : this.question.selectedItem;
+      return ReactElementFactory.Instance.createElement(this.question.inputFieldComponentName, { item: actionItem, question: this.question });
     } else if (this.question.showSelectedItemLocText) {
       return this.renderLocString(this.question.selectedItemLocText);
     }

packages/survey-vue3-ui/src/components/dropdown/Dropdown.vue

@@ -93,8 +93,21 @@
       :tabindex="question.isDisabledAttr ? undefined : 0"
       :class="question.getControlClass()"
     >
-      <div v-if="question.readOnlyText" :class="question.cssClasses.controlValue">
-           <SvComponent :is="'survey-string'" :locString="question.locReadOnlyText" />
+      <div
+        v-if="question.showInputFieldComponent"
+        :class="question.cssClasses.controlValue"
+      >
+        <SvComponent
+          :is="question.inputFieldComponentName"
+          :item="readonlySelectedItem"
+          :question="question"
+        />
+      </div>
+      <div
+        v-else-if="question.readOnlyText"
+        :class="question.cssClasses.controlValue"
+      >
+        <SvComponent :is="'survey-string'" :locString="question.locReadOnlyText" />
       </div>
       <SvComponent :is="'sv-action-bar'" :model="model.editorButtons" />
     </div>
@@ -144,6 +157,12 @@ const showSelectedItemLocText = computed(
   () => props.question.showSelectedItemLocText
 );
 const selectedItemLocText = computed(() => props.question.selectedItemLocText);
+const readonlySelectedItem = computed(() => {
+  const m = model.value;
+  return m && typeof m.getSelectedAction === "function"
+    ? m.getSelectedAction()
+    : props.question.selectedItem;
+});
 
 useBase(() => model.value);
 

screenshots/dropdown.spec.ts

@@ -390,6 +390,32 @@ frameworks.forEach(framework => {
       await compareScreenshot(page, ".sd-question__content", "dropdown-custom-component.png");
     });
 
+    test("Check ReadOnly dropdown with custom component", async ({ page }) => {
+      await registerCustomItemComponent(page, framework);
+      const json = {
+        showQuestionNumbers: true,
+        autoFocusFirstQuestion: true,
+        elements: [
+          {
+            type: "dropdown",
+            readOnly: true,
+            name: "cars",
+            title: "Dropdown",
+            defaultValue: "Ford",
+            itemComponent: "new-item",
+            choices: ["Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen"]
+          }
+        ]
+      };
+      await initSurvey(page, framework, json);
+      await page.setViewportSize({ width: 1280, height: 1100 });
+      // await page.evaluate(() => {
+      //   (<HTMLElement>(window as any).survey.rootElement.getRootNode().querySelector(".sd-question__content svg")).style.height = "48px";
+      //   (<HTMLElement>(window as any).survey.rootElement.getRootNode().querySelector(".sd-question__content input")).style.backgroundColor = "red";
+      // });
+      await compareScreenshot(page, ".sd-question__content", "dropdown-readonly-custom-component.png");
+    });
+
     test("Check overlay popup in dropdown question", async ({ page }) => {
       await page.setViewportSize({ width: 500, height: 700 });
       await page.evaluate(() => {