Merge branch 'master' into feature/5328-ranking-items-to-order

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [1.9.91](https://github.com/surveyjs/survey-library/compare/v1.9.90...v1.9.91) (2023-06-08)
+
 ## [1.9.90](https://github.com/surveyjs/survey-library/compare/v1.9.89...v1.9.90) (2023-05-31)
 
 ## [1.9.89](https://github.com/surveyjs/survey-library/compare/v1.9.88...v1.9.89) (2023-05-23)

package.json

@@ -81,7 +81,7 @@
     "testcafe:ci:angular": "testcafe -c 4 -q attemptLimit=5,successThreshold=1 chrome:headless testCafe/ --app \"http-server ./packages/survey-angular-ui/example/dist --proxy http://localhost:8080? -p 8080\" --selector-timeout 1500 --reporter minimal --env=angular",
     "prepare": "husky install"
   },
-  "version": "1.9.90",
+  "version": "1.9.91",
   "name": "survey-library",
   "private": true,
   "devDependencies": {

packages/survey-angular-ui/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [1.9.91](https://github.com/surveyjs/surveyjs/compare/v1.9.90...v1.9.91) (2023-06-08)
+
 ## [1.9.90](https://github.com/surveyjs/surveyjs/compare/v1.9.89...v1.9.90) (2023-05-31)
 
 ## [1.9.89](https://github.com/surveyjs/surveyjs/compare/v1.9.88...v1.9.89) (2023-05-23)

packages/survey-angular-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-angular-ui",
-  "version": "1.9.90",
+  "version": "1.9.91",
   "description": "survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.",
   "keywords": [
     "Survey",

packages/survey-angular-ui/src/components/dropdown/dropdown.component.html

@@ -18,7 +18,7 @@
             <ng-container *ngIf="dropdownModel.showInputFieldComponent">
                 <ng-template [component]="{ name: model.inputFieldComponentName, data: { model: dropdownModel.getSelectedAction(), question: model } }"></ng-template>
             </ng-container>
-            <sv-ng-string *ngIf="dropdownModel.showSelectedItemLocText" [model]="model.selectedItemLocText"></sv-ng-string>
+            <sv-ng-string *ngIf="model.showSelectedItemLocText" [model]="model.selectedItemLocText"></sv-ng-string>
             <input #inputElement type="text" autocomplete="off" [(ngModel)]="dropdownModel.inputStringRendered" [class]="model.cssClasses.filterStringInput"
             [attr.role]="dropdownModel.filterStringEnabled ? model.ariaRole : null"
             [attr.id]="model.getInputId()"

src/base-interfaces.ts

@@ -55,6 +55,7 @@ export interface ISurvey extends ITextProcessor, ISurveyErrorOwner {
   isClearValueOnHidden: boolean;
   isClearValueOnHiddenContainer: boolean;
   questionsOrder: string;
+  matrixDragHandleArea: string;
   keepIncorrectValues: boolean;
   questionCreated(question: IQuestion): any;
   questionAdded(

src/dropdownListModel.ts

@@ -34,7 +34,7 @@ export class DropdownListModel extends Base {
   protected listModel: ListModel<ItemValue>;
   protected popupCssClasses = "sv-single-select-list";
   protected listModelFilterStringChanged = (newValue: string) => {
-    if(this.filterString !== newValue) {
+    if (this.filterString !== newValue) {
       this.filterString = newValue;
     }
   }
@@ -93,7 +93,7 @@ export class DropdownListModel extends Base {
     });
     this._popupModel.cssClass = this.popupCssClasses;
     this._popupModel.onVisibilityChanged.add((_, option: { isVisible: boolean }) => {
-      if(option.isVisible) {
+      if (option.isVisible) {
         this.listModel.renderElements = true;
       }
       if (option.isVisible && this.question.choicesLazyLoadEnabled) {
@@ -220,11 +220,9 @@ export class DropdownListModel extends Base {
     defaultValue: "",
     onSet: (newValue, target: DropdownListModel) => {
       target.question.inputHasValue = !!newValue;
-      target.showSelectedItemLocText = target.question.showSelectedItemLocText;
     }
   }) inputString: string;
 
-  @property({}) showSelectedItemLocText: boolean;
   @property({}) showInputFieldComponent: boolean;
   @property() ariaActivedescendant: string;
 
@@ -317,11 +315,9 @@ export class DropdownListModel extends Base {
     question.onPropertyChanged.add((sender: any, options: any) => {
       if (options.name == "value") {
         this.showInputFieldComponent = this.question.showInputFieldComponent;
-        this.showSelectedItemLocText = this.question.showSelectedItemLocText;
       }
     });
     this.showInputFieldComponent = this.question.showInputFieldComponent;
-    this.showSelectedItemLocText = this.question.showSelectedItemLocText;
 
     this.listModel = this.createListModel();
     this.updateAfterListModelCreated(this.listModel);
@@ -508,10 +504,10 @@ export class DropdownListModel extends Base {
 
   dispose(): void {
     super.dispose();
-    if(!!this.listModel) {
+    if (!!this.listModel) {
       this.listModel.dispose();
     }
-    if(!!this.popupModel) {
+    if (!!this.popupModel) {
       this.popupModel.dispose();
     }
   }

src/question_baseselect.ts

@@ -323,7 +323,9 @@ export class QuestionSelectBase extends Question {
   protected onEnableItemCallBack(item: ItemValue): boolean {
     return true;
   }
-  protected onSelectedItemValuesChangedHandler(newValue: any): void { }
+  protected onSelectedItemValuesChangedHandler(newValue: any): void {
+    this.survey?.loadedChoicesFromServer(this);
+  }
   protected getItemIfChoicesNotContainThisValue(value: any, text?: string): any {
     if(!this.isReady) {
       return this.createItemValue(value, text);
@@ -343,6 +345,9 @@ export class QuestionSelectBase extends Question {
     return itemValue || selectedItemValues || (this.isOtherSelected ? this.otherItem : this.getItemIfChoicesNotContainThisValue(this.value));
   }
   protected onGetSingleSelectedItem(selectedItemByValue: ItemValue): void {}
+  protected getMultipleSelectedItems(): Array<ItemValue> {
+    return [];
+  }
   private setConditionalChoicesRunner() {
     if (this.choicesVisibleIf) {
       if (!this.conditionChoicesVisibleIfRunner) {
@@ -951,18 +956,28 @@ export class QuestionSelectBase extends Question {
   protected getChoicesDisplayValue(items: ItemValue[], val: any): any {
     if (val == this.otherItemValue.value)
       return this.otherValue ? this.otherValue : this.locOtherText.textOrHtml;
+    const selItem = this.getSingleSelectedItem();
+    if(!!selItem && selItem.value === val) return selItem.locText.textOrHtml;
     var str = ItemValue.getTextOrHtmlByValue(items, val);
     return str == "" && val ? val : str;
   }
   protected getDisplayArrayValue(keysAsText: boolean, value: any,
     onGetValueCallback?: (index: number) => any): string {
     var items = this.visibleChoices;
     var strs = [];
+    const vals = [];
     for (var i = 0; i < value.length; i++) {
-      let val = !onGetValueCallback ? value[i] : onGetValueCallback(i);
-      let valStr = this.getChoicesDisplayValue(items, val);
-      if (valStr) {
-        strs.push(valStr);
+      vals.push(!onGetValueCallback ? value[i] : onGetValueCallback(i));
+    }
+    if(Helpers.isTwoValueEquals(this.value, vals)) {
+      this.getMultipleSelectedItems().forEach(item => strs.push(item.locText.textOrHtml));
+    }
+    if(strs.length === 0) {
+      for (var i = 0; i < vals.length; i++) {
+        let valStr = this.getChoicesDisplayValue(items, vals[i]);
+        if (valStr) {
+          strs.push(valStr);
+        }
       }
     }
     return strs.join(", ");
@@ -1180,12 +1195,11 @@ export class QuestionSelectBase extends Question {
     if (this.enableOnLoadingChoices) {
       this.readOnly = false;
     }
+    const errors = [];
     if (!this.isReadOnly) {
-      var errors = [];
       if (this.choicesByUrl && this.choicesByUrl.error) {
         errors.push(this.choicesByUrl.error);
       }
-      this.errors = errors;
     }
     var newChoices = null;
     var checkCachedValuesOnExisting = true;
@@ -1240,6 +1254,10 @@ export class QuestionSelectBase extends Question {
         }
       }
     }
+    if(!this.isReadOnly && !newChoices && !this.isFirstLoadChoicesFromUrl) {
+      this.value = null;
+    }
+    this.errors = errors;
     this.choicesLoaded();
   }
   private createCachedValueForUrlRequests(

src/question_checkbox.ts

@@ -200,6 +200,9 @@ export class QuestionCheckboxModel extends QuestionCheckboxBase {
     return this.validateItemValues(itemValues);
   }
   public get selectedItems(): Array<ItemValue> { return this.selectedChoices; }
+  protected getMultipleSelectedItems(): Array<ItemValue> {
+    return this.selectedChoices;
+  }
   protected validateItemValues(itemValues: Array<ItemValue>): Array<ItemValue> {
     if(!!itemValues.length) return itemValues;
 

src/question_dropdown.ts

@@ -266,6 +266,7 @@ export class QuestionDropdownModel extends QuestionSelectBase {
   }
   protected onSelectedItemValuesChangedHandler(newValue: any): void {
     this.dropdownListModel?.setInputStringFromSelectedItem(newValue);
+    super.onSelectedItemValuesChangedHandler(newValue);
   }
   protected hasUnknownValue(
     val: any,

src/question_matrixdynamic.ts

@@ -89,7 +89,13 @@ export class QuestionMatrixDynamicModel extends QuestionMatrixDropdownModelBase
   private draggedRow: MatrixDropdownRowModelBase;
   private isBanStartDrag(pointerDownEvent: PointerEvent): boolean {
     const target = (<HTMLElement>pointerDownEvent.target);
-    return target.getAttribute("contenteditable") === "true" || target.nodeName === "INPUT";
+    return target.getAttribute("contenteditable") === "true" || target.nodeName === "INPUT" || !this.isDragHandleAreaValid(target);
+  }
+  public isDragHandleAreaValid(node:HTMLElement): boolean {
+    if (this.survey.matrixDragHandleArea === "icon") {
+      return node.classList.contains(this.cssClasses.dragElementDecorator);
+    }
+    return true;
   }
   public onPointerDown(pointerDownEvent: PointerEvent, row: MatrixDropdownRowModelBase):void {
     if (!row || !this.allowRowsDragAndDrop) return;

src/survey.ts

@@ -2925,6 +2925,20 @@ export class SurveyModel extends SurveyElementCore
   public get isShowStartingPage(): boolean {
     return this.state === "starting";
   }
+  /**
+   * Specifies which part of a choice item responds to a drag gesture in MatrixDynamic questions.
+   *
+   * Possible values:
+   *
+   * - `"entireItem"` (default) - Users can use the entire choice item as a drag handle.
+   * - `"icon"` - Users can only use the choice item icon as a drag handle.
+   */
+  public get matrixDragHandleArea():string {
+    return this.getPropertyValue("matrixDragHandleArea", "entireItem");
+  }
+  public set matrixDragHandleArea(val: string) {
+    this.setPropertyValue("matrixDragHandleArea", val);
+  }
   /**
    * Survey is showing a page right now. It is in "running", "preview" or starting state.
    */
@@ -7082,6 +7096,12 @@ Serializer.addClass("survey", [
     default: "initial",
     choices: ["initial", "random"],
   },
+  {
+    name: "matrixDragHandleArea",
+    visible: false,
+    default: "entireItem",
+    choices: ["entireItem", "icon"]
+  },
   "showPageNumbers:boolean",
   {
     name: "showQuestionNumbers",

tests/choicesRestfultests.ts

@@ -13,6 +13,7 @@ import { JsonObject, Serializer } from "../src/jsonobject";
 import { QuestionRadiogroupModel } from "../src/question_radiogroup";
 import { settings } from "../src/settings";
 import { MatrixDropdownColumn } from "../src/question_matrixdropdowncolumn";
+import { SurveyError } from "../src/survey-error";
 
 export default QUnit.module("choicesRestful");
 
@@ -719,8 +720,24 @@ QUnit.test("Set value before loading data, bug #1089", function(assert) {
   question.hasItemsCallbackDelay = true;
   question.onSurveyLoad();
   survey.setValue("q1", "CA");
-  question.doResultsCallback();
+  question["onLoadChoicesFromUrl"]([new ItemValue("CA")]);
   assert.equal(question.value, "CA", "'CA' value is still here");
+  assert.equal(question.selectedItem.value, "CA", "selectedItem is correct");
+});
+QUnit.test("Clear value on getting empty array, bug #6251", function(assert) {
+  var survey = new SurveyModel();
+  survey.addNewPage("1");
+  var question = new QuestionDropdownModelTester("q1");
+  question.choicesByUrl.url = "{state}";
+  survey.pages[0].addQuestion(question);
+  question.hasItemsCallbackDelay = true;
+  question.onSurveyLoad();
+  survey.setValue("q1", "CA");
+  question.choicesByUrl.error = new SurveyError("Empty request");
+  question["onLoadChoicesFromUrl"]([]);
+  assert.equal(question.isEmpty(), true, "value is empty");
+  assert.equal(question.selectedItem, null, "selectedItem is null");
+  assert.equal(question.errors.length, 1, "It shows error on empty result");
 });
 
 QUnit.test(
@@ -736,9 +753,10 @@ QUnit.test(
     question.onSurveyLoad();
     survey.setValue("q1", "CA");
     assert.equal(question.isOtherSelected, false, "There shuld not be other#1");
-    question.doResultsCallback();
+    question["onLoadChoicesFromUrl"]([new ItemValue("CA")]);
     assert.equal(question.isOtherSelected, false, "There shuld not be other#2");
     assert.equal(question.value, "CA", "'CA' value is still here");
+    assert.equal(question.selectedItem.value, "CA", "selectedItem is correct");
   }
 );
 
@@ -748,20 +766,21 @@ QUnit.test("preset data and same data from url", function(assert) {
   survey.addNewPage("1");
   var question = new QuestionDropdownModelTester("q1");
   survey.storeOthersAsComment = false;
-
+  question.hasItemsCallbackDelay = true;
+  question.choicesByUrl.url = "{state}";
+  survey.pages[0].addQuestion(question);
+  question.onSurveyLoad();
+  survey.data = { q1: "CA" };
   survey.onValueChanging.add(function() {
     counter++;
   });
-
   survey.onValueChanged.add(function() {
     counter++;
   });
-
-  question.choicesByUrl.url = "{state}";
-  survey.pages[0].addQuestion(question);
-  survey.data = { q1: "CA" };
+  assert.equal(question.value, "CA", "value is here");
   question["onLoadChoicesFromUrl"]([new ItemValue("CA"), new ItemValue("AA")]);
-
+  assert.equal(question.value, "CA", "value is still here");
+  assert.equal(question.selectedItem.value, "CA", "selecteditem is correct");
   assert.equal(counter, 0, "value doesn't change");
 });
 

tests/questionDropdownTests.ts

@@ -2,6 +2,7 @@ import { SurveyModel } from "../src/survey";
 import { QuestionDropdownModel } from "../src/question_dropdown";
 import { ListModel } from "../src/list";
 import { createListContainerHtmlElement } from "./utilstests";
+import { Question } from "../src/question";
 import { settings } from "../src/settings";
 
 export default QUnit.module("choicesRestful");
@@ -1049,7 +1050,13 @@ QUnit.test("lazy loading + onGetChoiceDisplayValue: defaultValue", assert => {
       "name": "q1",
       "defaultValue": 55,
       "choicesLazyLoadEnabled": true
-    }]
+    },
+    {
+      "type": "text",
+      "name": "q2",
+      "title": "{q1}"
+    }
+    ]
   };
   const survey = new SurveyModel(json);
   survey.onChoicesLazyLoad.add((sender, options) => {
@@ -1069,11 +1076,13 @@ QUnit.test("lazy loading + onGetChoiceDisplayValue: defaultValue", assert => {
   });
 
   const question = <QuestionDropdownModel>survey.getAllQuestions()[0];
+  const questionTitle = <Question>survey.getAllQuestions()[1];
   assert.equal(question.choicesLazyLoadEnabled, true);
   assert.equal(question.choices.length, 0);
   assert.equal(question.value, 55);
   assert.equal(question.selectedItem.value, 55);
   assert.equal(question.selectedItem.text, "DisplayText_55");
+  assert.equal(questionTitle.locTitle.textOrHtml, "DisplayText_55", "display text is correct");
 
   question.dropdownListModel.popupModel.isVisible = true;
   setTimeout(() => {