Revert "Fixed surveyjs/service#2255 - Improve checkboxes adaptivity" (#…

…8625)
surveyjs · Jul 29, 2024 · 5639ef6 · 5639ef6
1 parent db82196
commit 5639ef6
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 85 deletions.
diff --git a/src/question.ts b/src/question.ts
@@ -50,10 +50,6 @@ class TriggerExpressionInfo {
   runSecondCheck: (keys: any) => boolean = (keys: any): boolean => false;
 }
 
-function querySelectorIncludingSelf(el: HTMLElement, selector: string): HTMLElement {
-  return el.querySelector(selector) || el as any != DomWindowHelper.getWindow() && el.matches(selector) && el;
-}
-
 /**
  * A base class for all questions.
  */
@@ -2568,7 +2564,7 @@ export class Question extends SurveyElement<Question>
     if (!!el && this.isDefaultRendering()) {
       const scrollableSelector = this.getObservedElementSelector();
       if (!scrollableSelector) return;
-      const defaultRootEl: HTMLElement = querySelectorIncludingSelf(el, scrollableSelector);
+      const defaultRootEl = el.querySelector(scrollableSelector);
       if (!defaultRootEl) return;
       let isProcessed = false;
       let requiredWidth: number = undefined;
@@ -2579,7 +2575,7 @@ export class Question extends SurveyElement<Question>
           isProcessed = false;
         }
         const callback = () => {
-          const rootEl: HTMLElement = querySelectorIncludingSelf(el, scrollableSelector);
+          const rootEl = <HTMLElement>el.querySelector(scrollableSelector);
           if (!requiredWidth && this.isDefaultRendering()) {
             requiredWidth = rootEl.scrollWidth;
           }
@@ -2603,10 +2599,8 @@ export class Question extends SurveyElement<Question>
       });
       this.onMobileChangedCallback = () => {
         setTimeout(() => {
-          const rootEl = querySelectorIncludingSelf(el, scrollableSelector);
-          if (rootEl) {
-            this.processResponsiveness(requiredWidth, getElementWidth(rootEl));
-          }
+          const rootEl = <HTMLElement>el.querySelector(scrollableSelector);
+          this.processResponsiveness(requiredWidth, getElementWidth(rootEl));
         }, 0);
       };
       this.resizeObserver.observe(el);

diff --git a/src/question_baseselect.ts b/src/question_baseselect.ts
@@ -12,7 +12,7 @@ import { ConditionRunner } from "./conditions";
 import { Helpers, HashTable } from "./helpers";
 import { settings } from "./settings";
 import { CssClassBuilder } from "./utils/cssClassBuilder";
-import { classesToSelector, mergeValues } from "./utils/utils";
+import { mergeValues } from "./utils/utils";
 
 /**
  * A base class for multiple-choice question types ([Checkboxes](https://surveyjs.io/form-library/documentation/questioncheckboxmodel), [Dropdown](https://surveyjs.io/form-library/documentation/questiondropdownmodel), [Radio Button Group](https://surveyjs.io/form-library/documentation/questionradiogroupmodel), etc.).
@@ -1833,27 +1833,8 @@ export class QuestionSelectBase extends Question {
     }
     return columns;
   }
-
-  protected getObservedElementSelector(): string {
-    return classesToSelector(this.cssClasses.mainRoot);
-  }
-
-  protected supportResponsiveness(): boolean {
-    return true;
-  }
-
-  @property() allowMultiColumns = true;
-  protected onBeforeSetCompactRenderer(): void {
-    super.onBeforeSetDesktopRenderer();
-    this.allowMultiColumns = false;
-  }
-  protected onBeforeSetDesktopRenderer(): void {
-    super.onBeforeSetDesktopRenderer();
-    this.allowMultiColumns = true;
-  }
-
   get hasColumns() {
-    return !this.isMobile && this.allowMultiColumns &&
+    return !this.isMobile &&
       (this.getCurrentColCount() > 1);
   }
   get rowLayout() {

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -325,7 +325,7 @@ function preventDefaults(event: any) {
   event.stopPropagation();
 }
 function classesToSelector(str: string): string {
-  if (!str) return str;
+  if(!str) return str;
   const re = /\s*?([\w-]+)\s*?/g;
   return str.replace(re, ".$1");
 }
@@ -477,7 +477,7 @@ export function compareArrays<T>(oldValue: Array<T>, newValue: Array<T>, getKey:
   const commonItemsInOldMap = new Map<any, number>();
   oldValue.forEach((item) => {
     const itemKey = getKey(item);
-    if (!oldItemsMap.has(itemKey)) {
+    if(!oldItemsMap.has(itemKey)) {
       oldItemsMap.set(getKey(item), item);
     } else {
       //if keys are set incorrectly do not process comparing
@@ -486,7 +486,7 @@ export function compareArrays<T>(oldValue: Array<T>, newValue: Array<T>, getKey:
   });
   newValue.forEach((item) => {
     const itemKey = getKey(item);
-    if (!newItemsMap.has(itemKey)) {
+    if(!newItemsMap.has(itemKey)) {
       newItemsMap.set(itemKey, item);
     } else {
       //if keys are set incorrectly do not process comparing
@@ -498,7 +498,7 @@ export function compareArrays<T>(oldValue: Array<T>, newValue: Array<T>, getKey:
 
   //calculating addedItems and items that exist in both arrays
   newItemsMap.forEach((item, key) => {
-    if (!oldItemsMap.has(key)) {
+    if(!oldItemsMap.has(key)) {
       addedItems.push(item);
     } else {
       commonItemsInNewMap.set(key, commonItemsInNewMap.size);
@@ -508,7 +508,7 @@ export function compareArrays<T>(oldValue: Array<T>, newValue: Array<T>, getKey:
   //calculating deletedItems and items that exist in both arrays
 
   oldItemsMap.forEach((item, key) => {
-    if (!newItemsMap.has(key)) {
+    if(!newItemsMap.has(key)) {
       deletedItems.push(item);
     } else {
       commonItemsInOldMap.set(key, commonItemsInOldMap.size);
@@ -520,7 +520,7 @@ export function compareArrays<T>(oldValue: Array<T>, newValue: Array<T>, getKey:
   commonItemsInNewMap.forEach((index, key) => {
     const oldIndex = commonItemsInOldMap.get(key);
     const item = newItemsMap.get(key);
-    if (oldIndex !== index) reorderedItems.push({ item: item, movedForward: oldIndex < index });
+    if(oldIndex !== index) reorderedItems.push({ item: item, movedForward: oldIndex < index });
   });
 
   //calculating merged array if multiple operations are applied at once
@@ -529,7 +529,7 @@ export function compareArrays<T>(oldValue: Array<T>, newValue: Array<T>, getKey:
   let commonItemsIndex = 0;
   const commonItemsKeysOrder = Array.from(commonItemsInNewMap.keys());
   oldValue.forEach((item, index) => {
-    if (commonItemsInNewMap.has(getKey(item))) {
+    if(commonItemsInNewMap.has(getKey(item))) {
       oldItemsWithCorrectOrder[index] = newItemsMap.get(commonItemsKeysOrder[commonItemsIndex]);
       commonItemsIndex++;
     } else {
@@ -541,8 +541,8 @@ export function compareArrays<T>(oldValue: Array<T>, newValue: Array<T>, getKey:
   let tempValuesArray: Array<T> = [];
   oldItemsWithCorrectOrder.forEach((item) => {
     const itemKey = getKey(item);
-    if (newItemsMap.has(itemKey)) {
-      if (tempValuesArray.length > 0) {
+    if(newItemsMap.has(itemKey)) {
+      if(tempValuesArray.length > 0) {
         valuesToInsertBeforeKey.set(itemKey, tempValuesArray);
         tempValuesArray = [];
       }
@@ -553,7 +553,7 @@ export function compareArrays<T>(oldValue: Array<T>, newValue: Array<T>, getKey:
 
   const mergedItems = new Array<T>();
   newItemsMap.forEach((item, key) => {
-    if (valuesToInsertBeforeKey.has(key)) {
+    if(valuesToInsertBeforeKey.has(key)) {
       valuesToInsertBeforeKey.get(key).forEach((item) => {
         mergedItems.push(item);
       });

diff --git a/...sionTests/tests/defaultV2/etalons/responsiveness-checkbox-col-count-5-small.png b/...sionTests/tests/defaultV2/etalons/responsiveness-checkbox-col-count-5-small.png
diff --git a/...ssionTests/tests/defaultV2/etalons/responsiveness-checkbox-col-count-5-wide.png b/...ssionTests/tests/defaultV2/etalons/responsiveness-checkbox-col-count-5-wide.png
diff --git a/visualRegressionTests/tests/defaultV2/responsiveness.ts b/visualRegressionTests/tests/defaultV2/responsiveness.ts
@@ -492,50 +492,6 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("responsiveness-checkbox-col-count-2.png", Selector(".sd-question"), t, comparer);
     });
   });
-  test("Check multicolumn checkbox question doesn't fit width", async (t) => {
-    await wrapVisualTest(t, async (t, comparer) => {
-      await t.resizeWindow(1600, 1080);
-      await initSurvey(framework, {
-        showQuestionNumbers: "off",
-        "widthMode": "static",
-        "width": "60%",
-        questions: [
-          {
-            "type": "checkbox",
-            "name": "contract-type",
-            "title": "Type of contract ",
-            "choices": [
-              {
-                "value": "Item 1",
-                "text": "Permanent"
-              },
-              {
-                "value": "Item 2",
-                "text": "Fixed-Term"
-              },
-              {
-                "value": "Item 3",
-                "text": "All year round"
-              },
-              {
-                "value": "Item 4",
-                "text": "Term-time only"
-              },
-              {
-                "value": "Item 5",
-                "text": "Annualized"
-              }
-            ],
-            "colCount": 5
-          }
-        ]
-      });
-      await takeElementScreenshot("responsiveness-checkbox-col-count-5-wide.png", Selector(".sd-question"), t, comparer);
-      await t.resizeWindow(1000, 1080);
-      await resetFocusToBody();
-      await takeElementScreenshot("responsiveness-checkbox-col-count-5-small.png", Selector(".sd-question"), t, comparer);
-    });
-  });
 
   test("Check image question", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {