Merge branch 'master' into feature/C5124-file-chooser-image-question

src/common-styles/sv-list.scss

@@ -59,8 +59,11 @@
 }
 
 .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) {
+  outline: none;
+
   .sv-list__item-body {
     @include borderLight;
+    border-radius: calcCornerRadius(1);
     padding-block: calcSize(0.75);
     padding-inline-end: calcSize(7.75);
     padding-inline-start: calcSize(1.75);
@@ -69,8 +72,6 @@
   .sv-string-viewer {
     margin-inline-start: calcSize(-0.25);
   }
-
-  outline: none;
 }
 
 .sv-list__item:hover,

src/defaultCss/cssmodern.ts

@@ -319,7 +319,7 @@ export var modernCss = {
     cellText: "sv-matrix__text",
     cellTextSelected: "sv-matrix__text--checked",
     cellTextDisabled: "sv-matrix__text--disabled",
-    cellResponsiveTitle: "sv-hidden",
+    cellResponsiveTitle: "sv-matrix__cell-responsive-title",
     itemSvgIconId: "#icon-modernradio",
   },
   matrixdropdown: {

src/defaultCss/cssstandard.ts

@@ -200,7 +200,7 @@ export var defaultStandardCss = {
     cellText: "sv_q_m_cell_text",
     cellTextSelected: "sv_q_m_cell_selected",
     cellLabel: "sv_q_m_cell_label",
-    cellResponsiveTitle: "sv-hidden"
+    cellResponsiveTitle: "sv_q_m_cell_responsive_title"
   },
   matrixdropdown: {
     root: "sv_q_matrix_dropdown",

src/defaultV2-theme/blocks/sd-dropdown.scss

@@ -164,7 +164,25 @@
     font-size: $font-editorfont-size;
     font-weight: $font-editorfont-weight;
     font-family: $font-editorfont-family;
-    padding-inline-end: calcSize(2);
+    padding-inline-end: calcSize(1.75);
+    padding-block: calcSize(1.25);
+    padding-inline-start: calcSize(1.75);
+    border: calcSize(0.25) solid transparent;
+    border-radius: calcCornerRadius(1);
+    transition: border-color $transition-duration;
+  }
+
+  .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) {
+    .sv-list__item-body {
+      @include borderLight;
+      padding-inline-end: calcSize(1.75);
+      padding-block: calcSize(1.25);
+      padding-inline-start: calcSize(1.75);
+    }
+  }
+
+  .sv-list__item span {
+    margin-inline-start: calcSize(-0.25);
   }
 }
 

src/defaultV2-theme/defaultV2.fontless.scss

@@ -72,7 +72,7 @@ body {
     position: relative;
   }
 
-  * {
+  @-moz-document url-prefix() {
     scrollbar-width: thin;
     scrollbar-color: $border transparent;
   }
@@ -113,7 +113,7 @@ body {
   overflow: auto;
   position: static;
 
-  * {
+  @-moz-document url-prefix() {
     scrollbar-width: thin;
     scrollbar-color: $border transparent;
   }
@@ -162,11 +162,15 @@ body {
   }
 }
 
-.sv-popup {
-  .sv-popup__scrolling-content {
+@-moz-document url-prefix() {
+  .sv-popup .sv-popup__scrolling-content {
     scrollbar-width: thin;
     scrollbar-color: $border transparent;
+  }
+}
 
+.sv-popup {
+  .sv-popup__scrolling-content {
     *,
     & {
       &::-webkit-scrollbar {

src/defaultV2-theme/mixins.scss

@@ -25,7 +25,6 @@
 
 @mixin borderLight {
   border: calcSize(0.25) solid $border-light;
-  border-radius: calcCornerRadius(1);
 }
 
 @mixin articleXXLargeFont {

src/dropdownListModel.ts

@@ -157,7 +157,7 @@ export class DropdownListModel extends Base {
       _onSelectionChanged = (item: IAction) => {
         this.question.value = item.id;
         if (this.question.searchEnabled) this.applyInputString(item as ItemValue);
-        this._popupModel.toggleVisibility();
+        this.popupModel.isVisible = false;
       };
     }
     const res = new ListModel<ItemValue>(visibleItems, _onSelectionChanged, false, undefined, this.question.choicesLazyLoadEnabled ? this.listModelFilterStringChanged : undefined, this.listElementId);

src/jsonobject.ts

@@ -1763,9 +1763,7 @@ export class JsonObject {
   }
   private removePosOnValueToJson(property: JsonObjectProperty, value: any): any {
     if(!property.isCustom || !value) return value;
-    if (!!value[JsonObject.positionPropertyName]) {
-      delete value[JsonObject.positionPropertyName];
-    }
+    this.removePosFromObj(value);
     return value;
   }
   private removePos(property: JsonObjectProperty, value: any): void {
@@ -1780,9 +1778,13 @@ export class JsonObject {
         this.removePosFromObj(obj[i]);
       }
     }
+    if(typeof obj !== "object") return;
     if (!!obj[JsonObject.positionPropertyName]) {
       delete obj[JsonObject.positionPropertyName];
     }
+    for(let key in obj) {
+      this.removePosFromObj(obj[key]);
+    }
   }
   private isValueArray(value: any): boolean {
     return value && Array.isArray(value);

src/knockout/components/progress/buttons.ts

@@ -1,5 +1,5 @@
 import * as ko from "knockout";
-import { ProgressButtons, ProgressButtonsResponsivityManager, IProgressButtonsViewModel } from "survey-core";
+import { ProgressButtons, ProgressButtonsResponsivityManager, IProgressButtonsViewModel, SurveyModel } from "survey-core";
 const template: any = require("html-loader?interpolate!val-loader!./buttons.html");
 
 export class ProgressButtonsViewModel implements IProgressButtonsViewModel {
@@ -8,7 +8,7 @@ export class ProgressButtonsViewModel implements IProgressButtonsViewModel {
   public canShowHeader = ko.observable(false);
   public canShowFooter = ko.observable(false);
   public canShowItemTitles = ko.observable(true);
-  constructor(private model: ProgressButtons, private element: HTMLElement, public container: string = "center") {
+  constructor(private model: ProgressButtons, private element: HTMLElement, public container: string = "center", public survey: SurveyModel) {
     this.respManager = new ProgressButtonsResponsivityManager(model, element, this);
   }
   onResize(canShowItemTitles: boolean): void {
@@ -42,7 +42,8 @@ ko.components.register("sv-progress-buttons", {
       return new ProgressButtonsViewModel(
         params.model,
         componentInfo.element.nextElementSibling,
-        params.container
+        params.container,
+        params.survey
       );
     },
   },

src/main.m600.scss

@@ -8,30 +8,37 @@
             .sv_qstn {
               display: block;
               width: 100% !important;
+
               .title-left {
                 float: none;
               }
+
               .sv_q_radiogroup_inline,
               .sv_q_checkbox_inline,
               .sv_q_imagepicker_inline {
                 display: block;
               }
+
               table.sv_q_matrix,
               table.sv_q_matrix_dropdown,
               table.sv_q_matrix_dynamic {
                 display: block;
+
                 thead {
                   display: none;
                 }
+
                 td.sv-table__cell--choice {
                   text-align: initial;
                 }
+
                 tbody,
                 tr,
                 td {
                   display: block;
                 }
               }
+
               table.sv_q_matrix_dropdown,
               table.sv_q_matrix_dynamic {
                 td {
@@ -40,15 +47,14 @@
                   }
                 }
               }
+
               table.sv_q_matrix {
                 td {
                   label.sv_q_m_label {
                     display: inline;
                   }
-                  &:after {
-                    content: attr(data-responsive-title);
-                  }
                 }
+
                 .sv_q_m_cell {
                   text-align: initial;
                 }

src/modern.m600.scss

@@ -8,27 +8,34 @@
             .sv-row__question {
               display: block;
               width: 100% !important;
+
               .sv-question__header--location--left {
                 float: none;
               }
+
               .sv-selectbase__item--inline,
               .sv-imagepicker__item--inline {
                 display: block;
               }
+
               table.sv-table {
                 display: block;
+
                 thead {
                   display: none;
                 }
+
                 td.sv-table__cell--choice {
                   text-align: initial;
                 }
+
                 tbody,
                 tr,
                 td {
                   display: block;
                 }
               }
+
               table.sv-matrixdropdown,
               table.sv-matrixdynamic {
                 td {
@@ -37,15 +44,14 @@
                   }
                 }
               }
+
               table.sv-matrix-root {
                 td {
                   label.sv-matrix__label {
                     display: inline;
                   }
-                  &:after {
-                    content: attr(data-responsive-title);
-                  }
                 }
+
                 .sv-matrix__cell {
                   text-align: initial;
                 }

testCafe/questions/dropdown.js

@@ -2068,4 +2068,67 @@ frameworks.forEach((framework) => {
       .expect(Selector(".sd-boolean__thumb-text").withText("Yes").visible).ok()
       .expect(popupContainer.visible).notOk();
   });
+
+  test.page(`${url_test}${theme}/${framework}`)("focusOnFirstError bricks dropdown popup if any errors are on the same page", async (t) => {
+    await t.resizeWindow(800, 600);
+    const json = {
+      pages: [
+        {
+          name: "Seite1",
+          elements: [
+            {
+              type: "dropdown",
+              name: "Anrede",
+              title: "Anrede",
+              choices: [
+                {
+                  value: "Item 1",
+                  text: "Frau",
+                },
+                {
+                  value: "Item 2",
+                  text: "Herr",
+                },
+                {
+                  value: "Item 3",
+                  text: "keine Angabe",
+                },
+                {
+                  value: "Item 4",
+                  text: "Divers",
+                },
+                {
+                  value: "Item 5",
+                  text: "Firma",
+                },
+              ],
+            },
+            {
+              type: "text",
+              name: "Nachname",
+              title: "Nachname",
+              isRequired: true,
+            },
+          ],
+        },
+      ],
+      focusOnFirstError: true,
+    };
+    await initSurvey(framework, json, {
+      "onValueChanged": (surveyModel) => { surveyModel.hasErrors(false, true); }
+    });
+
+    const questionDropdownV2Select = Selector(".sd-dropdown");
+    const popupContainer = Selector(".sv-popup__container").filterVisible();
+    const textQuestion = Selector(".sd-input.sd-text");
+    await t
+      .expect(textQuestion.focused).notOk()
+
+      .click(questionDropdownV2Select)
+      .expect(popupContainer.visible).ok()
+
+      .click(getListItemByText("Herr"))
+      .expect(textQuestion.focused).ok()
+      .expect(popupContainer.visible).notOk();
+  });
 });

testCafe/survey/surveyWidth.ts

@@ -26,10 +26,10 @@ frameworks.forEach((framework) => {
 
   test("Check question width", async (t) => {
     await t
-      .expect(Selector(".sv_row > div").getStyleProperty("min-width")).eql("min(100% + 0px, 0% + 300px)");
+      .expect(Selector(".sv_row > div").getStyleProperty("min-width")).eql("min(100%, 300px)");
 
     await ClientFunction(() => { window["survey"].getAllQuestions()[0].minWidth = "200px"; })();
     await t
-      .expect(Selector(".sv_row > div").getStyleProperty("min-width")).eql("min(100% + 0px, 0% + 200px)");
+      .expect(Selector(".sv_row > div").getStyleProperty("min-width")).eql("min(100%, 200px)");
   });
 });