#7787 Dropdown text cannot be selected/removed by symbols when Markdo…

…wn is enabled (#7805)

* #7787 Dropdown text cannot be selected/removed by symbols when Markdown is enabled
Fixes #7787

* #7787 - fixed tests

* #7787 update screenshots

* #7787 - update screenshots

src/dropdownListModel.ts

@@ -16,6 +16,8 @@ export class DropdownListModel extends Base {
   readonly minPageSize = 25;
   readonly loadingItemHeight = 40;
 
+  private htmlCleanerElement: HTMLDivElement;
+
   private _markdownMode = false;
   private _popupModel: PopupModel;
   private filteredItems: Array<ItemValue> = undefined;
@@ -251,14 +253,19 @@ export class DropdownListModel extends Base {
     const hasHtml = item?.locText.hasHtml;
     if (hasHtml || this.question.inputFieldComponentName) {
       this._markdownMode = true;
-      this.inputString = "";
+      this.inputString = this.cleanHtml(item?.locText.getHtmlValue());
       this.hintString = "";
     } else {
       this.inputString = item?.title;
       this.hintString = item?.title;
     }
   }
 
+  private cleanHtml(html: string): string {
+    this.htmlCleanerElement.innerHTML = html;
+    return this.htmlCleanerElement.textContent;
+  }
+
   protected fixInputCase() {
     const hintStringMiddle = this.hintStringMiddle;
     if (hintStringMiddle && this.inputString != hintStringMiddle) this.inputString = hintStringMiddle;
@@ -340,6 +347,7 @@ export class DropdownListModel extends Base {
   };
   constructor(protected question: Question, protected onSelectionChanged?: (item: IAction, ...params: any[]) => void) {
     super();
+    this.htmlCleanerElement = document.createElement("div");
     question.onPropertyChanged.add(this.qustionPropertyChangedHandler);
     this.showInputFieldComponent = this.question.showInputFieldComponent;
 

testCafe/survey/textMarkdown.ts

@@ -17,6 +17,7 @@ const json = {
       type: "dropdown",
       placeHolder: "Click me",
       name: "question2",
+      searchEnabled: false,
       choices: [
         { value: 1, text: "|choice 1|" },
         { value: 2, text: "|choice 2|" },

tests/dropdown_list_model_test.ts

@@ -812,6 +812,28 @@ QUnit.test("Survey Markdown - dropdown and other option", function (assert) {
   assert.equal(dropdownListModel.hintString, "", "no hint again");
 });
 
+QUnit.test("Survey Markdown - dropdown and input string", function (assert) {
+  var survey = new SurveyModel();
+  var page = survey.addNewPage("Page 1");
+  var q1 = new QuestionDropdownModel("q1");
+  page.addQuestion(q1);
+  q1.choices = [
+    { value: 1, text: "#text1markdown" },
+    { value: 2, text: "#text2markdown" },
+  ];
+  survey.onTextMarkdown.add(function (survey, options) {
+    options.html = options.text.replace(/#/g, "*<hr>");
+  });
+
+  q1.value = 2;
+  const dropdownListModel = q1.dropdownListModel;
+
+  dropdownListModel.changeSelectionWithKeyboard(false);
+  assert.equal(dropdownListModel.inputString, "*text2markdown");
+  dropdownListModel.changeSelectionWithKeyboard(true);
+  assert.equal(dropdownListModel.inputString, "*text1markdown");
+});
+
 QUnit.test("lazy loading clear value", function (assert) {
   const survey = new SurveyModel({
     questions: [{

visualRegressionTests/tests/defaultV2/dropdown.ts

@@ -436,7 +436,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1280, 1100);
       await initSurvey(framework, {
-        focusFirstQuestionAutomatic: true,
+        focusFirstQuestionAutomatic: false,
         showQuestionNumbers: "off",
         questions: [
           {
@@ -473,6 +473,9 @@ frameworks.forEach(framework => {
       const popupContainer = Selector(".sv-popup__container").filterVisible();
       await t.click(questionDropdownSelect);
       await takeElementScreenshot("dropdown-with-markdown-popup.png", popupContainer, t, comparer);
+
+      await t.pressKey("Enter");
+      await takeElementScreenshot("dropdown-with-markdown-focused.png", questionDropdownSelect, t, comparer);
     });
   });