#6672 Drop-down menu doesn't disappear after clicking on the button. (#…

…7023) * #6672 Drop-down menu doesn't disappear after clicking on the button. Fixes #6672 * #6672 revert css changes * #6672 search input by rootElement field * #6672 Drop-down menu doesn't disappear after clicking on the button. Fixes #6672 * #6672 Drop-down menu doesn't disappear after clicking on the button. Fixes #6672 * #6672 - rename method * Drop-down menu doesn't disappear after clicking on the button. #6672 - fixed default theme for tests * #6672 - fix angular events --------- Co-authored-by: Aleksey Novikov <novikov@abrisplatform.com>
surveyjs · Sep 28, 2023 · 0d445a9 · 0d445a9
1 parent db53613
commit 0d445a9
Show file tree

Hide file tree

Showing 19 changed files with 199 additions and 16 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
@@ -45,7 +45,7 @@
         <sv-ng-string *ngIf="model.selectedItemLocText" [model]="model.selectedItemLocText"></sv-ng-string>
         <div>{{ model.readOnlyText }}</div>
     </div>
-    <div *ngIf="model.cssClasses.chevronButtonIconId" [class]="model.cssClasses.chevronButton">
+    <div *ngIf="model.cssClasses.chevronButtonIconId" [class]="model.cssClasses.chevronButton" (pointerdown)="chevronPointerDown($event)">
         <svg [iconName]="model.cssClasses.chevronButtonIconId" [partCss]="model.cssClasses.chevronButtonSvg" [size]="'auto'" sv-ng-svg-icon></svg>
     </div>
 </div>
diff --git a/packages/survey-angular-ui/src/components/dropdown/dropdown.component.ts b/packages/survey-angular-ui/src/components/dropdown/dropdown.component.ts
@@ -26,6 +26,9 @@ export class DropdownComponent extends BaseAngular implements OnInit {
     click(event: any) {
       this.dropdownModel?.onClick(event);
     }
+  chevronPointerDown(event: any) {
+    this.dropdownModel?.chevronPointerDown(event);
+    }
     clear(event: any) {
       this.dropdownModel?.onClear(event);
     }

diff --git a/packages/survey-angular-ui/src/components/tagbox/tagbox.component.html b/packages/survey-angular-ui/src/components/tagbox/tagbox.component.html
@@ -26,7 +26,7 @@
     <div disabled *ngIf="model.isReadOnly" [class]="model.getControlClass()" [attr.id]="model.inputId">
         <div>{{ model.readOnlyText }}</div>
     </div>
-    <div *ngIf="model.cssClasses.chevronButtonIconId" [class]="model.cssClasses.chevronButton">
+    <div *ngIf="model.cssClasses.chevronButtonIconId" [class]="model.cssClasses.chevronButton" (pointerdown)="chevronPointerDown($event)">
         <svg [iconName]="model.cssClasses.chevronButtonIconId" [partCss]="model.cssClasses.chevronButtonSvg" [size]="'auto'" sv-ng-svg-icon></svg>
     </div>
 </div>
diff --git a/packages/survey-angular-ui/src/components/tagbox/tagbox.component.ts b/packages/survey-angular-ui/src/components/tagbox/tagbox.component.ts
@@ -25,6 +25,9 @@ export class TagboxComponent implements OnInit {
     click(event: any) {
       this.dropdownModel?.onClick(event);
     }
+  chevronPointerDown(event: any) {
+    this.dropdownModel?.chevronPointerDown(event);
+    }
     clear(event: any) {
       this.dropdownModel?.onClear(event);
     }

diff --git a/packages/survey-vue3-ui/src/components/dropdown/Dropdown.vue b/packages/survey-vue3-ui/src/components/dropdown/Dropdown.vue
@@ -105,6 +105,7 @@
     </div>
     <div
       :class="question.cssClasses.chevronButton"
+          v-on:pointerdown="chevronPointerDown"
       v-if="question.cssClasses.chevronButtonIconId"
     >
       <sv-svg-icon
@@ -134,6 +135,9 @@ const model = computed(() => {
 const click = (event: any) => {
   model.value?.onClick(event);
 };
+const chevronPointerDown = (event: any) => {
+  model.value?.chevronPointerDown(event);
+};
 const clear = (event: any) => {
   model.value?.onClear(event);
 };

diff --git a/packages/survey-vue3-ui/src/components/tagbox/Tagbox.vue b/packages/survey-vue3-ui/src/components/tagbox/Tagbox.vue
@@ -60,6 +60,7 @@
     </div>
     <div
       :class="question.cssClasses.chevronButton"
+          v-on:pointerdown="chevronPointerDown"
       v-if="question.cssClasses.chevronButtonIconId"
     >
       <sv-svg-icon
@@ -88,6 +89,9 @@ const model = computed(() => {
 const click = (event: any) => {
   model.value?.onClick(event);
 };
+const chevronPointerDown = (event: any) => {
+  model.value?.chevronPointerDown(event);
+};
 const clear = (event: any) => {
   model.value?.onClear(event);
 };

diff --git a/src/defaultV2-theme/blocks/sd-dropdown.scss b/src/defaultV2-theme/blocks/sd-dropdown.scss
@@ -36,6 +36,9 @@
   font-family: var(--font-family, $font-family);
   font-size: calcFontSize(1);
 }
+.sd-dropdown input[readonly] {
+  pointer-events: none;
+}
 
 .sd-dropdown__value {
   width: 100%;
@@ -48,7 +51,7 @@
   font-weight: $font-editorfont-weight;
   color: $font-editorfont-color;
   font-size: $font-editorfont-size;
-
+  
   position: relative;
 }
 
@@ -58,7 +61,7 @@
   align-items: center;
   padding: 0 calcSize(1);
   margin: auto 0;
-}
+  }
 
 .sd-dropdown_chevron-button {
   position: absolute;
@@ -76,7 +79,7 @@
 .sd-dropdown_clean-button-svg {
   width: multiply(1.5, $font-editorfont-size);
   height: multiply(1.5, $font-editorfont-size);
-}
+  }
 
 .sd-input.sd-dropdown:focus-within {
   box-shadow: 0 0 0 2px $primary;
@@ -128,7 +131,7 @@
 
 .sd-dropdown__hint-prefix {
   color: $font-editorfont-placeholdercolor;
-
+  
   span {
     white-space: pre;
   }

diff --git a/src/dropdownListModel.ts b/src/dropdownListModel.ts
@@ -362,11 +362,11 @@ export class DropdownListModel extends Base {
     if (this.question.readOnly || this.question.isDesignMode) return;
     this._popupModel.toggleVisibility();
     this.focusItemOnClickAndPopup();
-    if (this.searchEnabled && !!event && !!event.target) {
-      const input = event.target.querySelector("input");
-      if (!!input) {
-        input.focus();
-      }
+    this.question.focus();
+  }
+  public chevronPointerDown(event: any): void {
+    if (this._popupModel.isVisible) {
+      event.preventDefault();
     }
   }
 

diff --git a/src/knockout/components/dropdown/dropdown.html b/src/knockout/components/dropdown/dropdown.html
@@ -74,7 +74,7 @@
   </div>
   <!-- /ko -->
   <!-- ko if: question.cssClasses.chevronButtonIconId -->
-  <div data-bind="css: question.cssClasses.chevronButton">
+  <div data-bind="css: question.cssClasses.chevronButton, event: {pointerdown: chevronPointerDown}">
     <!-- ko component: { name: 'sv-svg-icon', params: { css: question.cssClasses.chevronButtonSvg, iconName: question.cssClasses.chevronButtonIconId, size: 'auto' } } -->
     <!-- /ko -->
   </div>

diff --git a/src/knockout/components/dropdown/dropdown.ts b/src/knockout/components/dropdown/dropdown.ts
@@ -13,6 +13,9 @@ ko.components.register("sv-dropdown", {
       const click = (_: any, e: any) => {
         q.dropdownListModel?.onClick(e);
       };
+      const chevronPointerDown = (_: any, e: any) => {
+        q.dropdownListModel?.chevronPointerDown(e);
+      };
       const clear = (_: any, e: any) => {
         q.dropdownListModel?.onClear(e);
       };
@@ -30,7 +33,7 @@ ko.components.register("sv-dropdown", {
         q.dropdownListModel = new DropdownListModel(params.question);
       }
       new ImplementorBase(q.dropdownListModel);
-      return { question: q, model: q.dropdownListModel, click: click, clear: clear, keyhandler: keyhandler, blur: blur, focus: focus };
+      return { question: q, model: q.dropdownListModel, click: click, clear: clear, keyhandler: keyhandler, blur: blur, focus: focus, chevronPointerDown: chevronPointerDown };
     },
   },
   template: template,

diff --git a/src/knockout/components/tagbox/tagbox.html b/src/knockout/components/tagbox/tagbox.html
@@ -69,7 +69,7 @@
   </div>
   <!-- /ko -->
   <!-- ko if: question.cssClasses.chevronButtonIconId -->
-  <div data-bind="css: question.cssClasses.chevronButton">
+  <div data-bind="css: question.cssClasses.chevronButton, event: {pointerdown: chevronPointerDown}">
     <!-- ko component: { name: 'sv-svg-icon', params: { css: question.cssClasses.chevronButtonSvg, iconName: question.cssClasses.chevronButtonIconId, size: 'auto' } } -->
     <!-- /ko -->
   </div>

diff --git a/src/knockout/components/tagbox/tagbox.ts b/src/knockout/components/tagbox/tagbox.ts
@@ -13,6 +13,9 @@ ko.components.register("sv-tagbox", {
       const click = (_: any, e: any) => {
         q.dropdownListModel?.onClick(e);
       };
+      const chevronPointerDown = (_: any, e: any) => {
+        q.dropdownListModel?.chevronPointerDown(e);
+      };
       const clear = (_: any, e: any) => {
         q.dropdownListModel?.onClear(e);
       };
@@ -34,7 +37,7 @@ ko.components.register("sv-tagbox", {
         q.dropdownListModel = new DropdownMultiSelectListModel(q);
       }
       new ImplementorBase(q.dropdownListModel);
-      return { question: q, model: q.dropdownListModel, click: click, clear: clear, keyhandler: keyhandler, blur: blur, focus: focus, inputKeyHandler: inputKeyHandler };
+      return { question: q, model: q.dropdownListModel, click: click, clear: clear, keyhandler: keyhandler, blur: blur, focus: focus, inputKeyHandler: inputKeyHandler, chevronPointerDown: chevronPointerDown };
     },
   },
   template: template,

diff --git a/src/main.scss b/src/main.scss
@@ -944,6 +944,9 @@ body {
   }
 }
 
+.sv_q_dropdown_control input[readonly] {
+  pointer-events: none;
+}
 @import "./main.rtl.scss";
 @import "./main.m600.scss";
 

diff --git a/src/modern/blocks/sv-dropdown.scss b/src/modern/blocks/sv-dropdown.scss
@@ -23,6 +23,9 @@
   justify-content: space-between;
 }
 
+.sv-dropdown input[readonly] {
+  pointer-events: none;
+}
 .sv-dropdown:focus,
 .sv-dropdown:focus-within {
   background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%231AB394;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='2,2 0,4 5,9 10,4 8,2 5,5 '/%3E%3C/svg%3E ");

diff --git a/src/react/dropdown-base.tsx b/src/react/dropdown-base.tsx
@@ -12,6 +12,9 @@ export class SurveyQuestionDropdownBase<T extends Question> extends SurveyQuesti
   click = (event: any) => {
     this.question.dropdownListModel?.onClick(event);
   };
+  chevronPointerDown = (event: any) => {
+    this.question.dropdownListModel?.chevronPointerDown(event);
+  };
   clear = (event: any) => {
     this.question.dropdownListModel?.onClear(event);
   };
@@ -157,7 +160,8 @@ export class SurveyQuestionDropdownBase<T extends Question> extends SurveyQuesti
     if (!this.question.cssClasses.chevronButtonIconId) return null;
 
     return (
-      <div className={this.question.cssClasses.chevronButton}>
+      <div className={this.question.cssClasses.chevronButton}
+        onPointerDown={this.chevronPointerDown}>
         <SvgIcon
           className={this.question.cssClasses.chevronButtonSvg}
           iconName={this.question.cssClasses.chevronButtonIconId}

diff --git a/src/vue/components/dropdown/dropdown.vue b/src/vue/components/dropdown/dropdown.vue
@@ -87,6 +87,7 @@
     </div>
     <div
       :class="question.cssClasses.chevronButton"
+          v-on:pointerdown="chevronPointerDown"
       v-if="question.cssClasses.chevronButtonIconId"
     >
       <sv-svg-icon
@@ -127,6 +128,9 @@ export class DropdownComponent extends BaseVue {
   public click(event: any) {
     this.model?.onClick(event);
   }
+  public chevronPointerDown(event: any) {
+    this.model?.chevronPointerDown(event);
+  }
   public clear(event: any) {
     this.model?.onClear(event);
   }

diff --git a/src/vue/components/tagbox/tagbox.vue b/src/vue/components/tagbox/tagbox.vue
@@ -49,6 +49,7 @@
     </div>
     <div
       :class="question.cssClasses.chevronButton"
+          v-on:pointerdown="chevronPointerDown"
       v-if="question.cssClasses.chevronButtonIconId"
     >
       <sv-svg-icon
@@ -87,6 +88,9 @@ export class TagboxComponent extends BaseVue {
   public clear(event: any) {
     this.question.dropdownListModel?.onClear(event);
   }
+  public chevronPointerDown(event: any) {
+    this.question.dropdownListModel?.chevronPointerDown(event);
+  }
   public keyhandler(event: any) {
     this.question.dropdownListModel?.keyHandler(event);
   }

diff --git a/testCafe/questions/dropdown.js b/testCafe/questions/dropdown.js
@@ -1943,6 +1943,57 @@ frameworks.forEach((framework) => {
       .expect(popupContainer.visible).ok()
 
       .click(questionDropdownV2Select, { offsetX: dropdownWidth - 20, offsetY: 20 })
+      .expect(popupContainer.visible).notOk()
+
+      .click(questionDropdownV2Select, { offsetX: dropdownWidth - 20, offsetY: 20 })
+      .expect(popupContainer.visible).ok()
+
+      .click("body", { offsetX: 600, offsetY: 20 })
+      .expect(popupContainer.visible).notOk();
+  });
+
+  test.page(`${url_test}${theme}/${framework}`)("Check dropdown popup opens after beak click - search enabled", async (t) => {
+    await t.resizeWindow(800, 600);
+    const jsonWithDropDown = {
+      questions: [
+        {
+          type: "dropdown",
+          name: "cars",
+          title: "Dropdown",
+          choices: [
+            "Ford",
+            "Vauxhall",
+            "Volkswagen",
+            "Nissan",
+            "Audi",
+            "Mercedes-Benz",
+            "BMW",
+            "Peugeot",
+            "Toyota",
+            "Citroen"
+          ]
+        }
+      ]
+    };
+    await initSurvey(framework, jsonWithDropDown);
+
+    const questionDropdownV2Select = Selector(".sd-dropdown");
+    const popupContainer = Selector(".sv-popup__container").filterVisible();
+    const dropdownWidth = await questionDropdownV2Select.getBoundingClientRectProperty("width");
+    await t
+      .expect(dropdownWidth).gt(550)
+      .expect(popupContainer.visible).notOk()
+
+      .click(questionDropdownV2Select, { offsetX: dropdownWidth - 20, offsetY: 20 })
+      .expect(popupContainer.visible).ok()
+
+      .click(questionDropdownV2Select, { offsetX: dropdownWidth - 20, offsetY: 20 })
+      .expect(popupContainer.visible).notOk()
+
+      .click(questionDropdownV2Select, { offsetX: dropdownWidth - 20, offsetY: 20 })
+      .expect(popupContainer.visible).ok()
+
+      .click("body", { offsetX: 600, offsetY: 20 })
       .expect(popupContainer.visible).notOk();
   });