From 582f0781c48a80784804df37699ff98c7df01dbb Mon Sep 17 00:00:00 2001 From: Andrew Date: Wed, 11 Oct 2023 15:20:56 +0300 Subject: [PATCH] Do not show clear button in dropdown in Creator V1 fix #7118 (#7119) --- .../dropdown/dropdown.component.html | 2 +- .../components/tagbox/tagbox.component.html | 2 +- .../src/components/dropdown/Dropdown.vue | 2 +- .../src/components/tagbox/Tagbox.vue | 2 +- .../components/dropdown/dropdown.html | 2 +- src/knockout/components/tagbox/tagbox.html | 2 +- src/question_dropdown.ts | 3 ++ src/question_tagbox.ts | 4 ++- src/react/dropdown-base.tsx | 2 +- src/vue/components/dropdown/dropdown.vue | 2 +- src/vue/components/tagbox/tagbox.vue | 2 +- tests/questionDropdownTests.ts | 29 ++++++++++++++++++ tests/question_tagbox_tests.ts | 30 ++++++++++++++++++- 13 files changed, 73 insertions(+), 11 deletions(-) diff --git a/packages/survey-angular-ui/src/components/dropdown/dropdown.component.html b/packages/survey-angular-ui/src/components/dropdown/dropdown.component.html index c811c5d9b4..1b19e677eb 100644 --- a/packages/survey-angular-ui/src/components/dropdown/dropdown.component.html +++ b/packages/survey-angular-ui/src/components/dropdown/dropdown.component.html @@ -32,7 +32,7 @@ (change)="inputChange($event)" (blur)="blur($event)" (focus)="focus($event)"/>
+ [class]="model.cssClasses.cleanButton" (click)="clear($event)" [visible]="model.showClearButton">
+ (click)="clear($event)" [visible]="model.showClearButton">
-
+
diff --git a/src/knockout/components/tagbox/tagbox.html b/src/knockout/components/tagbox/tagbox.html index 05a916c0f2..49f047a5dc 100644 --- a/src/knockout/components/tagbox/tagbox.html +++ b/src/knockout/components/tagbox/tagbox.html @@ -53,7 +53,7 @@
-
+
diff --git a/src/question_dropdown.ts b/src/question_dropdown.ts index 55fc95f8b1..f5c511efa2 100644 --- a/src/question_dropdown.ts +++ b/src/question_dropdown.ts @@ -54,6 +54,9 @@ export class QuestionDropdownModel extends QuestionSelectBase { public set showOptionsCaption(val: boolean) { this.allowClear = val; } + public get showClearButton(): boolean { + return this.allowClear && !this.isEmpty() && (!this.isDesignMode || settings.supportCreatorV2); + } public get optionsCaption() { return this.placeholder; } diff --git a/src/question_tagbox.ts b/src/question_tagbox.ts index 92f7dbd739..9553742654 100644 --- a/src/question_tagbox.ts +++ b/src/question_tagbox.ts @@ -213,7 +213,9 @@ export class QuestionTagboxModel extends QuestionCheckboxModel { super.clearValue(); this.dropdownListModel.clear(); } - + public get showClearButton(): boolean { + return this.allowClear && !this.isEmpty() && (!this.isDesignMode || settings.supportCreatorV2); + } //a11y public get isNewA11yStructure(): boolean { return false; diff --git a/src/react/dropdown-base.tsx b/src/react/dropdown-base.tsx index ea5df58a01..26a03f2ebe 100644 --- a/src/react/dropdown-base.tsx +++ b/src/react/dropdown-base.tsx @@ -138,7 +138,7 @@ export class SurveyQuestionDropdownBase extends SurveyQuesti createClearButton(): JSX.Element | null { if (!this.question.allowClear || !this.question.cssClasses.cleanButtonIconId) return null; - const style = { display: this.question.isEmpty() ? "none" : "" }; + const style = { display: !this.question.showClearButton ? "none" : "" }; return (
{ + const json = { + questions: [ + { + "type": "dropdown", + "name": "q1", + "optionsCaption": "New optionsCaption", + "choices": [ + "Ford", + "Vauxhall", + "Volkswagen" + ] + }] + }; + const survey = new SurveyModel(json); + const q = survey.getQuestionByName("q1"); + assert.equal(q.showClearButton, false, "question is empty"); + q.value = "Ford"; + assert.equal(q.showClearButton, true, "question is not empty"); + q.allowClear = false; + assert.equal(q.showClearButton, false, "allowClear is false"); + q.allowClear = true; + survey.setDesignMode(true); + assert.equal(q.showClearButton, false, "design mode"); + settings.supportCreatorV2 = true; + assert.equal(q.showClearButton, true, "Creator V2"); + settings.supportCreatorV2 = false; +}); + QUnit.test("ListModel localization", assert => { const json = { questions: [ diff --git a/tests/question_tagbox_tests.ts b/tests/question_tagbox_tests.ts index e4efa0cbe3..346f19bf51 100644 --- a/tests/question_tagbox_tests.ts +++ b/tests/question_tagbox_tests.ts @@ -1291,4 +1291,32 @@ QUnit.test("TagBox readOnlyText property should be reactive, Bug#6830", (assert) survey.locale = ""; assert.equal(q.readOnlyText, "en-sel", "Empty en, #3"); assert.equal(q.dropdownListModel.filterStringPlaceholder, "en-sel", "dropdownlist en, #3"); -}); \ No newline at end of file +}); +QUnit.test("question.showClearButton", assert => { + const json = { + questions: [ + { + "type": "tagbox", + "name": "q1", + "optionsCaption": "New optionsCaption", + "choices": [ + "Ford", + "Vauxhall", + "Volkswagen" + ] + }] + }; + const survey = new SurveyModel(json); + const q = survey.getQuestionByName("q1"); + assert.equal(q.showClearButton, false, "question is empty"); + q.value = "Ford"; + assert.equal(q.showClearButton, true, "question is not empty"); + q.allowClear = false; + assert.equal(q.showClearButton, false, "allowClear is false"); + q.allowClear = true; + survey.setDesignMode(true); + assert.equal(q.showClearButton, false, "design mode"); + settings.supportCreatorV2 = true; + assert.equal(q.showClearButton, true, "Creator V2"); + settings.supportCreatorV2 = false; +});