Do not show clear button in dropdown in Creator V1 fix #7118 (#7119)

surveyjs · Oct 11, 2023 · 582f078 · 582f078
1 parent 9d32f6c
commit 582f078
Show file tree

Hide file tree

Showing 13 changed files with 73 additions and 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
@@ -32,7 +32,7 @@
             (change)="inputChange($event)" (blur)="blur($event)" (focus)="focus($event)"/>
         </div>
         <div *ngIf="(model.allowClear && model.cssClasses.cleanButtonIconId)"
-            [class]="model.cssClasses.cleanButton" (click)="clear($event)" [visible]="!model.isEmpty()">
+            [class]="model.cssClasses.cleanButton" (click)="clear($event)" [visible]="model.showClearButton">
             <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->
             <!-- /ko -->
             <svg [iconName]="model.cssClasses.cleanButtonIconId" [partCss]="model.cssClasses.cleanButtonSvg" [title]="model.clearCaption"

diff --git a/packages/survey-angular-ui/src/components/tagbox/tagbox.component.html b/packages/survey-angular-ui/src/components/tagbox/tagbox.component.html
@@ -15,7 +15,7 @@
             <ng-template [component]="{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }"></ng-template>
         </div>
         <div *ngIf="(model.allowClear && model.cssClasses.cleanButtonIconId)" [class]="model.cssClasses.cleanButton"
-            (click)="clear($event)" [visible]="!model.isEmpty()">
+            (click)="clear($event)" [visible]="model.showClearButton">
             <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->
             <!-- /ko -->
             <svg [iconName]="model.cssClasses.cleanButtonIconId" [partCss]="model.cssClasses.cleanButtonSvg" [title]="model.clearCaption"

diff --git a/packages/survey-vue3-ui/src/components/dropdown/Dropdown.vue b/packages/survey-vue3-ui/src/components/dropdown/Dropdown.vue
@@ -74,7 +74,7 @@
       <div
         :class="question.cssClasses.cleanButton"
         v-if="question.allowClear && question.cssClasses.cleanButtonIconId"
-        v-show="!question.isEmpty()"
+        v-show="question.showClearButton"
         @click="clear"
       >
         <sv-svg-icon

diff --git a/packages/survey-vue3-ui/src/components/tagbox/Tagbox.vue b/packages/survey-vue3-ui/src/components/tagbox/Tagbox.vue
@@ -37,7 +37,7 @@
       <div
         :class="question.cssClasses.cleanButton"
         v-if="question.allowClear && question.cssClasses.cleanButtonIconId"
-        v-show="!question.isEmpty()"
+        v-show="question.showClearButton"
         @click="clear"
       >
         <sv-svg-icon

diff --git a/src/knockout/components/dropdown/dropdown.html b/src/knockout/components/dropdown/dropdown.html
@@ -54,7 +54,7 @@
       event: { blur: blur, focus: focus }"></input>
     </div>
     <!-- ko if: (question.allowClear && question.cssClasses.cleanButtonIconId) -->
-    <div data-bind="css: question.cssClasses.cleanButton, click: clear, visible: !question.isEmpty() ">
+    <div data-bind="css: question.cssClasses.cleanButton, click: clear, visible: question.showClearButton ">
       <!-- ko component: { name: 'sv-svg-icon', params: { css: question.cssClasses.cleanButtonSvg, iconName: question.cssClasses.cleanButtonIconId, size: 'auto', title: question.clearCaption } } -->
       <!-- /ko -->
     </div>

diff --git a/src/knockout/components/tagbox/tagbox.html b/src/knockout/components/tagbox/tagbox.html
@@ -53,7 +53,7 @@
       </div>
     </div>
     <!-- ko if: (question.allowClear && question.cssClasses.cleanButtonIconId) -->
-    <div data-bind="css: question.cssClasses.cleanButton, click: clear, visible: !question.isEmpty() ">
+    <div data-bind="css: question.cssClasses.cleanButton, click: clear, visible: question.showClearButton ">
       <!-- ko component: { name: 'sv-svg-icon', params: { css: question.cssClasses.cleanButtonSvg, iconName: question.cssClasses.cleanButtonIconId, size: 'auto', title: question.clearCaption } } -->
       <!-- /ko -->
     </div>

diff --git 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
@@ -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
@@ -138,7 +138,7 @@ export class SurveyQuestionDropdownBase<T extends Question> 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 (
       <div
         className={this.question.cssClasses.cleanButton}

diff --git a/src/vue/components/dropdown/dropdown.vue b/src/vue/components/dropdown/dropdown.vue
@@ -61,7 +61,7 @@
       <div
         :class="question.cssClasses.cleanButton"
         v-if="question.allowClear && question.cssClasses.cleanButtonIconId"
-        v-show="!question.isEmpty()"
+        v-show="question.showClearButton"
         @click="clear"
       >
         <sv-svg-icon

diff --git a/src/vue/components/tagbox/tagbox.vue b/src/vue/components/tagbox/tagbox.vue
@@ -31,7 +31,7 @@
       <div
         :class="question.cssClasses.cleanButton"
         v-if="question.allowClear && question.cssClasses.cleanButtonIconId"
-        v-show="!question.isEmpty()"
+        v-show="question.showClearButton"
         @click="clear"
       >
         <sv-svg-icon

diff --git a/tests/questionDropdownTests.ts b/tests/questionDropdownTests.ts
@@ -301,6 +301,35 @@ QUnit.test("deserialize showOptionsCaption & optionsCaption to placeholder & all
   });
 });
 
+QUnit.test("question.showClearButton", assert => {
+  const json = {
+    questions: [
+      {
+        "type": "dropdown",
+        "name": "q1",
+        "optionsCaption": "New optionsCaption",
+        "choices": [
+          "Ford",
+          "Vauxhall",
+          "Volkswagen"
+        ]
+      }]
+  };
+  const survey = new SurveyModel(json);
+  const q = <QuestionDropdownModel>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
@@ -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");
-});
+});
+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 = <QuestionTagboxModel>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;
+});