Merge branch 'master' into bug/6797-commentplaceholder-reactive

src/dragdrop/core.ts

@@ -113,9 +113,12 @@ export abstract class DragDropCore<T> implements IDragDropEngine {
   protected doBanDropHere = (): void => { };
 
   protected findDropTargetNodeFromPoint(clientX: number, clientY: number): HTMLElement {
-    this.domAdapter.draggedElementShortcut.hidden = true;
+    const displayProp = this.domAdapter.draggedElementShortcut.style.display;
+    //this.domAdapter.draggedElementShortcut.hidden = true;
+    this.domAdapter.draggedElementShortcut.style.display = "none";
     let dragOverNode = <HTMLElement>document.elementFromPoint(clientX, clientY);
-    this.domAdapter.draggedElementShortcut.hidden = false;
+    // this.domAdapter.draggedElementShortcut.hidden = false;
+    this.domAdapter.draggedElementShortcut.style.display = displayProp || "block";
 
     if (!dragOverNode) return null;
 

src/question.ts

@@ -1851,6 +1851,9 @@ export class Question extends SurveyElement<Question>
         this.survey.beforeSettingQuestionErrors(this, errors);
       }
       this.errors = errors;
+      if(this.errors !== errors) {
+        this.errors.forEach(er => er.locText.strChanged());
+      }
     }
     this.updateContainsErrors();
     if (oldHasErrors != errors.length > 0) {
@@ -2200,6 +2203,12 @@ export class Question extends SurveyElement<Question>
     this.survey.processPopupVisiblityChanged(this, popupModel, visible);
   }
 
+  protected onTextKeyDownHandler(event: any) {
+    if (event.keyCode === 13) {
+      (this.survey as SurveyModel).questionEditFinishCallback(this, event);
+    }
+  }
+
   public transformToMobileView(): void { }
   public transformToDesktopView(): void { }
   public needResponsiveWidth() {
@@ -2336,6 +2345,7 @@ function makeNameValid(str: string): string {
   }
   return str;
 }
+
 Serializer.addClass("question", [
   { name: "!name", onSettingValue: (obj: any, val: any): any => { return makeNameValid(val); } },
   {

src/question_matrixdropdownbase.ts

@@ -358,14 +358,14 @@ implements ISurveyData, ISurveyImpl, ILocalizableOwner {
     }
     values[MatrixDropdownRowModelBase.IndexVariableName] = this.rowIndex;
     values[MatrixDropdownRowModelBase.RowValueVariableName] = this.rowName;
-    if (!properties) properties = {};
-    properties[MatrixDropdownRowModelBase.RowVariableName] = this;
+    const newProps = Helpers.createCopy(properties);
+    newProps[MatrixDropdownRowModelBase.RowVariableName] = this;
     for (var i = 0; i < this.cells.length; i++) {
       values[MatrixDropdownRowModelBase.RowVariableName] = this.value;
-      this.cells[i].runCondition(values, properties);
+      this.cells[i].runCondition(values, newProps);
     }
     if (!!this.detailPanel) {
-      this.detailPanel.runCondition(values, properties);
+      this.detailPanel.runCondition(values, newProps);
     }
   }
   public clearValue() {
@@ -1378,9 +1378,9 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel<Mat
   private checkColumnsVisibility() {
     var hasChanged = false;
     for (var i = 0; i < this.visibleColumns.length; i++) {
-      if (!this.visibleColumns[i].visibleIf) continue;
-      hasChanged =
-        this.isColumnVisibilityChanged(this.visibleColumns[i]) || hasChanged;
+      const column = this.visibleColumns[i];
+      if (!column.visibleIf && !column.isFilteredMultipleColumns) continue;
+      hasChanged = this.isColumnVisibilityChanged(column) || hasChanged;
     }
     if (hasChanged) {
       this.resetRenderedTable();
@@ -1402,25 +1402,43 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel<Mat
     }
   }
   private isColumnVisibilityChanged(column: MatrixDropdownColumn): boolean {
-    var curVis = column.hasVisibleCell;
-    var hasVisCell = false;
-    var rows = this.generatedVisibleRows;
-    for (var i = 0; i < rows.length; i++) {
-      var cell = rows[i].cells[column.index];
-      if (!!cell && !!cell.question && cell.question.isVisible) {
+    const curVis = column.hasVisibleCell;
+    const isMultipleColumnsVisibility = column.isFilteredMultipleColumns;
+    const curVisibleChoices = isMultipleColumnsVisibility ? column.getVisibleChoicesInCell : [];
+    const newVisibleChoices = new Array<any>();
+    let hasVisCell = false;
+    const rows = this.generatedVisibleRows;
+    for (let i = 0; i < rows.length; i++) {
+      const cell = rows[i].cells[column.index];
+      const q = cell?.question;
+      if (!!q && q.isVisible) {
         hasVisCell = true;
-        break;
+        if(isMultipleColumnsVisibility) {
+          this.updateNewVisibleChoices(q, newVisibleChoices);
+        } else break;
       }
     }
     if (curVis != hasVisCell) {
       column.hasVisibleCell = hasVisCell;
     }
+    if(isMultipleColumnsVisibility) {
+      column.setVisibleChoicesInCell(newVisibleChoices);
+      if(!Helpers.isArraysEqual(curVisibleChoices, newVisibleChoices, true, false, false)) return true;
+    }
     return curVis != hasVisCell;
   }
+  private updateNewVisibleChoices(q: Question, dest: Array<any>): void {
+    const choices = q.visibleChoices;
+    if(!Array.isArray(choices)) return;
+    for(let i = 0; i < choices.length; i ++) {
+      const ch = choices[i];
+      if(dest.indexOf(ch.value) < 0) dest.push(ch.value);
+    }
+  }
   protected runTotalsCondition(
     values: HashTable<any>,
     properties: HashTable<any>
-  ) {
+  ): void {
     if (!this.generatedTotalRow) return;
     this.generatedTotalRow.runCondition(
       this.getRowConditionValues(values),

src/question_matrixdropdowncolumn.ts

@@ -124,6 +124,7 @@ export class MatrixDropdownColumn extends Base
   private indexValue = -1;
   private _isVisible = true;
   private _hasVisibleCell = true;
+  private _visiblechoices: Array<any>;
 
   constructor(name: string, title: string = null) {
     super();
@@ -209,16 +210,44 @@ export class MatrixDropdownColumn extends Base
   public get isVisible() {
     return this._isVisible;
   }
-  public setIsVisible(newVal: boolean) {
+  public setIsVisible(newVal: boolean): void {
     this._isVisible = newVal;
   }
-  public get hasVisibleCell() {
+  public get hasVisibleCell(): boolean {
     return this._hasVisibleCell;
   }
   public set hasVisibleCell(newVal: boolean) {
     this._hasVisibleCell = newVal;
   }
-  public get name() {
+  public getVisibleMultipleChoices(): Array<ItemValue> {
+    const choices = this.templateQuestion.visibleChoices;
+    if(!Array.isArray(choices)) return [];
+    if(!Array.isArray(this._visiblechoices)) return choices;
+    const res = new Array<ItemValue>();
+    for(let i = 0; i < choices.length; i ++) {
+      const item = choices[i];
+      if(this._visiblechoices.indexOf(item.value) > -1) res.push(item);
+    }
+    return res;
+  }
+  public get getVisibleChoicesInCell(): Array<any> {
+    if(Array.isArray(this._visiblechoices)) return this._visiblechoices;
+    const res = this.templateQuestion.visibleChoices;
+    return Array.isArray(res) ? res : [];
+  }
+  public setVisibleChoicesInCell(val: Array<any>): void {
+    this._visiblechoices = val;
+  }
+  public get isFilteredMultipleColumns(): boolean {
+    if(!this.showInMultipleColumns) return false;
+    const choices = this.templateQuestion.choices;
+    if(!Array.isArray(choices)) return false;
+    for(let i = 0; i < choices.length; i ++) {
+      if(choices[i].visibleIf) return true;
+    }
+    return false;
+  }
+  public get name(): string {
     return this.templateQuestion.name;
   }
   public set name(val: string) {

src/question_matrixdropdownrendered.ts

@@ -936,7 +936,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
     var choices = column.templateQuestion.choices;
     if (!!choices && Array.isArray(choices) && choices.length == 0)
       return this.matrix.choices;
-    choices = column.templateQuestion.visibleChoices;
+    choices = column.getVisibleMultipleChoices();
     if (!choices || !Array.isArray(choices)) return null;
     return choices;
   }

src/question_paneldynamic.ts

@@ -1518,14 +1518,16 @@ export class QuestionPanelDynamicModel extends Question
       cachedValues[QuestionPanelDynamicItem.ParentItemVariableName] = (<any>this.parent).getValue();
     }
     for (var i = 0; i < this.panels.length; i++) {
-      var panelValues = this.getPanelItemData(this.panels[i].data);
+      const panel = this.panels[i];
+      var panelValues = this.getPanelItemData(panel.data);
       //Should be unique for every panel due async expression support
-      var newValues = Helpers.createCopy(cachedValues);
-      newValues[
-        QuestionPanelDynamicItem.ItemVariableName.toLowerCase()
-      ] = panelValues;
+      const newValues = Helpers.createCopy(cachedValues);
+      const panelName = QuestionPanelDynamicItem.ItemVariableName;
+      newValues[panelName] = panelValues;
       newValues[QuestionPanelDynamicItem.IndexVariableName.toLowerCase()] = i;
-      this.panels[i].runCondition(newValues, properties);
+      const newProps = Helpers.createCopy(properties);
+      newProps[panelName] = panel;
+      panel.runCondition(newValues, newProps);
     }
   }
   onAnyValueChanged(name: string) {

src/question_text.ts

@@ -437,12 +437,10 @@ export class QuestionTextModel extends QuestionTextBase {
   };
   public onKeyDown = (event: any) => {
     this.checkForUndo(event);
-    if(this.isInputTextUpdate) {
+    if (this.isInputTextUpdate) {
       this._isWaitingForEnter = event.keyCode === 229;
     }
-    if (event.keyCode === 13) {
-      (this.survey as SurveyModel).questionEditFinishCallback(this, event);
-    }
+    this.onTextKeyDownHandler(event);
   }
   public onChange = (event: any): void => {
     if (event.target === settings.environment.root.activeElement) {

src/survey-error.ts

@@ -44,7 +44,7 @@ export class SurveyError {
     return surveyLocalization.getString(locStrName, this.getLocale());
   }
   public onUpdateErrorTextCallback: (error: SurveyError) => void = undefined;
-  public updateText() {
+  public updateText(): void {
     if(this.onUpdateErrorTextCallback) {
       this.onUpdateErrorTextCallback(this);
     }

src/survey.ts

@@ -5460,7 +5460,7 @@ export class SurveyModel extends SurveyElementCore
   private isTriggerIsRunning: boolean = false;
   private triggerValues: any = null;
   private triggerKeys: any = null;
-  private checkTriggers(key: any, isOnNextPage: boolean, isOnComplete: boolean = false) {
+  private checkTriggers(key: any, isOnNextPage: boolean, isOnComplete: boolean = false, name?: string) {
     if (this.isCompleted || this.triggers.length == 0 || this.isDisplayMode) return;
     if (this.isTriggerIsRunning) {
       this.triggerValues = this.getFilteredValues();
@@ -5469,13 +5469,20 @@ export class SurveyModel extends SurveyElementCore
       }
       return;
     }
+    let isQuestionInvalid = false;
+    if(!isOnComplete && name && this.hasRequiredValidQuestionTrigger) {
+      const question = <Question>this.getQuestionByValueName(name);
+      isQuestionInvalid = question && !question.validate(false);
+    }
     this.isTriggerIsRunning = true;
     this.triggerKeys = key;
     this.triggerValues = this.getFilteredValues();
     var properties = this.getFilteredProperties();
     let prevCanBeCompleted = this.canBeCompletedByTrigger;
-    for (var i: number = 0; i < this.triggers.length; i++) {
-      this.triggers[i].checkExpression(isOnNextPage, isOnComplete,
+    for (let i = 0; i < this.triggers.length; i++) {
+      const trigger = this.triggers[i];
+      if(isQuestionInvalid && trigger.requireValidQuestion) continue;
+      trigger.checkExpression(isOnNextPage, isOnComplete,
         this.triggerKeys,
         this.triggerValues,
         properties
@@ -5486,6 +5493,12 @@ export class SurveyModel extends SurveyElementCore
     }
     this.isTriggerIsRunning = false;
   }
+  private get hasRequiredValidQuestionTrigger(): boolean {
+    for (let i = 0; i < this.triggers.length; i++) {
+      if(this.triggers[i].requireValidQuestion) return true;
+    }
+    return false;
+  }
   private doElementsOnLoad() {
     for (var i = 0; i < this.pages.length; i++) {
       this.pages[i].onSurveyLoad();
@@ -6117,7 +6130,7 @@ export class SurveyModel extends SurveyElementCore
     var triggerKeys: { [index: string]: any } = {};
     triggerKeys[name] = { newValue: newValue, oldValue: oldValue };
     this.runConditionOnValueChanged(name, newValue);
-    this.checkTriggers(triggerKeys, false);
+    this.checkTriggers(triggerKeys, false, false, name);
     if (allowNotifyValueChanged)
       this.notifyQuestionOnValueChanged(name, newValue);
     if (locNotification !== "text") {

src/trigger.ts

@@ -130,6 +130,7 @@ export class Trigger extends Base {
       this.onFailure();
     }
   }
+  public get requireValidQuestion(): boolean { return false; }
   private perform(values: HashTable<any>, properties: HashTable<any>) {
     this.conditionRunner.onRunComplete = (res: boolean) => {
       this.triggerResult(res, values, properties);
@@ -299,6 +300,7 @@ export class SurveyTriggerComplete extends SurveyTrigger {
   public getType(): string {
     return "completetrigger";
   }
+  public get requireValidQuestion(): boolean { return true; }
   protected isRealExecution(): boolean {
     return !settings.triggers.executeCompleteOnValueChanged === this.isExecutingOnNextPage;
   }
@@ -368,6 +370,7 @@ export class SurveyTriggerSkip extends SurveyTrigger {
   public getType(): string {
     return "skiptrigger";
   }
+  public get requireValidQuestion(): boolean { return this.canBeExecuted(false); }
   public get gotoName(): string {
     return this.getPropertyValue("gotoName", "");
   }

testCafe/questions/ranking.js

@@ -281,4 +281,32 @@ frameworks.forEach((framework) => {
       "one"
     ]);
   });
+
+  test("ranking: work with flexbox layout", async (t) => {
+    const addFlexboxLayout = ClientFunction(() => {
+      const stylesheet = document.styleSheets[0];
+      stylesheet.addRule(".sv-ranking.sv-ranking.sv-ranking.sv-ranking.sv-ranking", "display:flex;flex-direction: column", 0);
+    });
+    const removeFlexboxLayout = ClientFunction(() => {
+      const stylesheet = document.styleSheets[0];
+      stylesheet.removeRule(0);
+    });
+
+    await addFlexboxLayout();
+
+    await t.dragToElement(PriceItem, BatteryItem);
+
+    let data = await getData();
+    await t.expect(data["smartphone-features"]).eql([
+      "Price",
+      "Battery life",
+      "Screen size",
+      "Storage space",
+      "Camera quality",
+      "Durability",
+      "Processor power",
+    ]);
+
+    await removeFlexboxLayout();
+  });
 });

tests/entries/test.ts

@@ -14,7 +14,7 @@ export * from "../surveyLocalizationTests"; //
 export * from "../surveyquestiontests"; //
 export * from "../question_matrixdynamictests";
 export * from "../question_matrixdropdownbasetests";
-export * from "../surveypaneldynamictests";
+export * from "../question_paneldynamic_tests";
 export * from "../surveyserializationtests"; //
 export * from "../surveytests"; //
 export * from "../surveyWindowTests"; //