diff --git a/src/dropdownListModel.ts b/src/dropdownListModel.ts index 37be36a0d5..0a31325183 100644 --- a/src/dropdownListModel.ts +++ b/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 = undefined; @@ -251,7 +253,7 @@ 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; @@ -259,6 +261,11 @@ export class DropdownListModel extends Base { } } + 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; diff --git a/testCafe/survey/textMarkdown.ts b/testCafe/survey/textMarkdown.ts index 421a7b0750..20ca31ef89 100644 --- a/testCafe/survey/textMarkdown.ts +++ b/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|" }, diff --git a/tests/dropdown_list_model_test.ts b/tests/dropdown_list_model_test.ts index ce3f907b24..09c2a22be4 100644 --- a/tests/dropdown_list_model_test.ts +++ b/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, "*
"); + }); + + 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: [{ diff --git a/visualRegressionTests/tests/defaultV2/dropdown.ts b/visualRegressionTests/tests/defaultV2/dropdown.ts index 634e21930a..482bc61cd2 100644 --- a/visualRegressionTests/tests/defaultV2/dropdown.ts +++ b/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); }); }); diff --git a/visualRegressionTests/tests/defaultV2/etalons/dropdown-with-markdown-focused.png b/visualRegressionTests/tests/defaultV2/etalons/dropdown-with-markdown-focused.png new file mode 100644 index 0000000000..a932cba82c Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/dropdown-with-markdown-focused.png differ diff --git a/visualRegressionTests/tests/defaultV2/etalons/dropdown-with-markdown.png b/visualRegressionTests/tests/defaultV2/etalons/dropdown-with-markdown.png index 780bb73b3c..486a103f0c 100644 Binary files a/visualRegressionTests/tests/defaultV2/etalons/dropdown-with-markdown.png and b/visualRegressionTests/tests/defaultV2/etalons/dropdown-with-markdown.png differ