Work for #5282 - If question width is small for text type then changi…

…ng input type breaks adaptivity (#5306)

* Work for #5282 - If question width is small for text type then changing input type breaks adaptivity

* Work for #5282 - If question width is small for text type then changing input type breaks adaptivity - fixed vr-test

* Fixed #5282 - If question width is small for text type then changing input type breaks adaptivity

* Fixed typo

* Updated vr-test and etalon

* Fixed #5282 - If question width is small for text type then changing input type breaks adaptivity

* Work for #5282 - If question width is small for text type then changing input type breaks adaptivity - fixed f- and vr- tests

---------

Co-authored-by: tsv2013 <tsv2013@noreply.github.com>

packages/survey-creator-core/src/components/action-container-view-model.ts

@@ -109,15 +109,8 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
     this.actionContainer = new SurveyElementActionContainer();
     this.actionContainer.dotsItem.iconSize = 16;
     this.actionContainer.dotsItem.popupModel.horizontalPosition = "center";
-    var actions: Array<Action> = [];
-    this.buildActions(actions);
-    this.setSurveyElement(surveyElement, false);
-    if (this.surveyElement) {
-      this.creator.sidebar.onPropertyChanged.add(this.sidebarFlyoutModeChangedFunc);
-      this.creator.onElementMenuItemsChanged(this.surveyElement, actions);
-      this.actionContainer.setItems(actions);
-      this.updateActionsProperties();
-    }
+    this.setSurveyElement(surveyElement);
+    this.creator.sidebar.onPropertyChanged.add(this.sidebarFlyoutModeChangedFunc);
     this.setShowAddQuestionButton(true);
   }
 
@@ -131,11 +124,17 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
       surveyElement.onPropertyChanged.add(this.selectedPropPageFunc);
     }
   }
-  protected setSurveyElement(surveyElement: T, updateActions: boolean = true): void {
+  protected setSurveyElement(surveyElement: T): void {
     this.detachElement(this.surveyElement);
     this.surveyElement = surveyElement;
     this.attachElement(this.surveyElement);
-    if (updateActions) {
+    if (this.surveyElement) {
+      var actions: Array<Action> = [];
+      this.buildActions(actions);
+      this.creator.onElementMenuItemsChanged(this.surveyElement, actions);
+      const prevActions = this.actionContainer.actions;
+      prevActions.forEach(action => action.dispose && action.dispose());
+      this.actionContainer.setItems(actions);
       this.updateActionsProperties();
     }
   }

packages/survey-creator-react/src/ImageItemValueWrapper.tsx

@@ -25,11 +25,11 @@ export class ImageItemValueAdornerComponent extends CreatorModelElement<
     super(props);
     this.rootRef = React.createRef();
   }
-  protected createModel(): void {
+  protected createModel(props: any): void {
     this.model = new ImageItemValueWrapperViewModel(
-      this.props.componentData.creator,
-      this.props.question,
-      this.props.item,
+      props.componentData.creator,
+      props.question,
+      props.item,
       null,
       null
     );

packages/survey-creator-react/src/ItemValueWrapper.tsx

@@ -21,11 +21,11 @@ export class ItemValueAdornerComponent extends CreatorModelElement<
   any
 > {
   model: ItemValueWrapperViewModel;
-  protected createModel(): void {
+  protected createModel(props: any): void {
     this.model = new ItemValueWrapperViewModel(
-      this.props.componentData.creator,
-      this.props.question,
-      this.props.item
+      props.componentData.creator,
+      props.question,
+      props.item
     );
   }
   protected getUpdatedModelProps(): string[] {

packages/survey-creator-react/src/LogoImage.tsx

@@ -15,12 +15,12 @@ export class LogoImageComponent extends CreatorModelElement<ILogoImageComponentP
     super(props);
     this.rootRef = React.createRef();
   }
-  protected createModel(): void {
+  protected createModel(props: any): void {
     let prevRoot: HTMLDivElement = null;
     if (!!this.model) {
       prevRoot = this.model.root;
     }
-    this.model = new LogoImageViewModel(this.props.data, prevRoot);
+    this.model = new LogoImageViewModel(props.data, prevRoot);
   }
   protected getUpdatedModelProps(): string[] {
     return ["data"];

packages/survey-creator-react/src/MatrixCellWrapper.tsx

@@ -20,15 +20,20 @@ export class MatrixCellAdornerComponent extends CreatorModelElement<
   any
 > {
   model: MatrixCellWrapperViewModel;
-  protected createModel(): void {
-    const data = this.props.componentData;
+  protected createModel(props: any): void {
+    const data = props.componentData;
+    let prevIsSelected = false;
+    if (!!this.model) {
+      prevIsSelected = this.model.isSelected;
+    }
     this.model = new MatrixCellWrapperViewModel(
       data.creator,
       data.element,
       data.question,
       data.row,
       data.column || data.element.cell?.column,
     );
+    this.model.isSelected = prevIsSelected;
   }
   protected getUpdatedModelProps(): string[] {
     return ["componentData"];

packages/survey-creator-react/src/ModelElement.tsx

@@ -3,21 +3,24 @@ import { SurveyElementBase } from "survey-react-ui";
 export class CreatorModelElement<P, S> extends SurveyElementBase<P, S> {
   constructor(props: P) {
     super(props);
-    this.createModel();
+    this.createModel(props);
   }
-  componentDidUpdate(prevProps: any, prevState: any): void {
-    super.componentDidUpdate(prevProps, prevState);
-    if(this.needUpdateModel(prevProps)) {
-      this.createModel();
+  shouldComponentUpdate(nextProps: any, nextState: any): boolean {
+    const result = super.shouldComponentUpdate(nextProps, nextState);
+    if (result) {
+      if (this.needUpdateModel(nextProps)) {
+        this.createModel(nextProps);
+      }
     }
+    return result;
   }
-  protected createModel(): void {}
-  protected needUpdateModel(prevProps: any): boolean {
+  protected createModel(props: any): void { }
+  protected needUpdateModel(nextProps: any): boolean {
     const names = this.getUpdatedModelProps();
-    if(!Array.isArray(names)) return true;
-    for(var i = 0; i < names.length; i ++) {
+    if (!Array.isArray(names)) return true;
+    for (var i = 0; i < names.length; i++) {
       const key = names[i];
-      if(this.props[key] !== prevProps[key]) return true;
+      if (this.props[key] !== nextProps[key]) return true;
     }
     return false;
   }

packages/survey-creator-react/src/PageNavigator.tsx

@@ -28,13 +28,13 @@ export class SurveyPageNavigator extends CreatorModelElement<
     super(props);
     this.containerRef = React.createRef();
   }
-  protected createModel(): void {
+  protected createModel(props: any): void {
     if (this.model) {
       this.model.dispose();
     }
     this.model = new PageNavigatorViewModel(
-      this.props.pagesController,
-      this.props.pageEditMode
+      props.pagesController,
+      props.pageEditMode
     );
   }
   protected getUpdatedModelProps(): string[] {

packages/survey-creator-react/src/Results.tsx

@@ -13,9 +13,9 @@ export class SurveyResults extends CreatorModelElement<
   any
 > {
   model: SurveyResultsModel;
-  protected createModel(): void {
+  protected createModel(props: any): void {
     if (this.props.survey) {
-      this.model = new SurveyResultsModel(this.props.survey);
+      this.model = new SurveyResultsModel(props.survey);
     }
   }
   protected getUpdatedModelProps(): string[] {

packages/survey-creator-react/src/StringEditor.tsx

@@ -12,11 +12,11 @@ export class SurveyLocStringEditor extends CreatorModelElement<any, any> {
     this.state = { changed: 0 };
     this.svStringEditorRef = React.createRef();
   }
-  protected createModel(): void {
+  protected createModel(props: any): void {
     if (this.baseModel) {
       this.baseModel.dispose();
     }
-    this.baseModel = new StringEditorViewModelBase(this.locString, this.creator);
+    this.baseModel = new StringEditorViewModelBase(props.locStr.locStr, props.locStr.creator);
   }
   protected getUpdatedModelProps(): string[] {
     return ["creator", "locString"];

packages/survey-creator-react/src/adorners/CellQuestion.tsx

@@ -14,10 +14,10 @@ export class CellQuestionAdornerComponent extends CreatorModelElement<
   any
 > {
   model: QuestionAdornerViewModel;
-  protected createModel(): void {
+  protected createModel(props: any): void {
     this.model = new QuestionAdornerViewModel(
-      this.props.componentData,
-      this.props.question,
+      props.componentData,
+      props.question,
       null
     );
   }

packages/survey-creator-react/src/adorners/CellQuestionDropdown.tsx

@@ -12,10 +12,10 @@ export class CellQuestionDropdownAdornerComponent extends CreatorModelElement<
   any
 > {
   model: QuestionAdornerViewModel;
-  protected createModel(): void {
+  protected createModel(props: any): void {
     this.model = new QuestionAdornerViewModel(
-      this.props.componentData,
-      this.props.question,
+      props.componentData,
+      props.question,
       null
     );
   }

packages/survey-creator-react/src/adorners/Page.tsx

@@ -34,10 +34,10 @@ export class CreatorSurveyPageComponent extends CreatorModelElement<
     super(props);
     this.rootRef = React.createRef();
   }
-  protected createModel(): void {
+  protected createModel(props: any): void {
     this.model = new PageAdorner(
-      this.props.creator,
-      this.props.page
+      props.creator,
+      props.page
     );
   }
   protected getUpdatedModelProps(): string[] {

packages/survey-creator-react/src/adorners/Question.tsx

@@ -25,16 +25,16 @@ export class QuestionAdornerComponent extends CreatorModelElement<
   private modelValue: QuestionAdornerViewModel;
   protected rootRef: React.RefObject<HTMLDivElement>;
 
-  protected createModel(): void {
+  protected createModel(props: any): void {
     if (this.modelValue) {
       this.modelValue.dispose();
     }
-    this.modelValue = this.createQuestionViewModel();
+    this.modelValue = this.createQuestionViewModel(props);
   }
-  protected createQuestionViewModel(): QuestionAdornerViewModel {
+  protected createQuestionViewModel(props: any): QuestionAdornerViewModel {
     return new QuestionAdornerViewModel(
-      this.props.componentData,
-      this.props.question,
+      props.componentData,
+      props.question,
       null
     );
   }

packages/survey-creator-react/src/adorners/QuestionDropdown.tsx

@@ -12,10 +12,10 @@ export class QuestionDropdownAdornerComponent extends QuestionAdornerComponent {
   constructor(props: QuestionAdornerComponentProps) {
     super(props);
   }
-  protected createQuestionViewModel(): QuestionDropdownAdornerViewModel {
+  protected createQuestionViewModel(props: any): QuestionDropdownAdornerViewModel {
     return new QuestionDropdownAdornerViewModel(
-      this.props.componentData,
-      this.props.question as QuestionDropdownModel,
+      props.componentData,
+      props.question as QuestionDropdownModel,
       null
     );
   }

packages/survey-creator-react/src/adorners/QuestionImage.tsx

@@ -15,10 +15,10 @@ export class QuestionImageAdornerComponent extends QuestionAdornerComponent {
     super(props);
     this.rootRef = React.createRef();
   }
-  protected createQuestionViewModel(): QuestionAdornerViewModel {
+  protected createQuestionViewModel(props: any): QuestionAdornerViewModel {
     return new QuestionImageAdornerViewModel(
-      this.props.componentData,
-      this.props.question as any,
+      props.componentData,
+      props.question as any,
       null,
       null
     );
@@ -58,7 +58,7 @@ export class QuestionImageAdornerComponent extends QuestionAdornerComponent {
     </div>);
   }
   renderChooseButton(): JSX.Element {
-    return(<div className="svc-image-question-controls">
+    return (<div className="svc-image-question-controls">
       {this.model.allowEdit ? attachKey2click(<span
         className="svc-context-button"
         onClick={() => this.imageModel.chooseFile(this.imageModel)}

packages/survey-creator-react/src/adorners/QuestionRating.tsx

@@ -8,13 +8,13 @@ import { CreatorModelElement } from "../ModelElement";
 export class QuestionRatingAdornerComponent extends CreatorModelElement<QuestionAdornerComponentProps, any> {
   private modelValue: QuestionRatingAdornerViewModel;
 
-  protected createModel(): void {
-    this.modelValue = this.createQuestionViewModel();
+  protected createModel(props: any): void {
+    this.modelValue = this.createQuestionViewModel(props);
   }
-  protected createQuestionViewModel(): QuestionRatingAdornerViewModel {
+  protected createQuestionViewModel(props: any): QuestionRatingAdornerViewModel {
     return new QuestionRatingAdornerViewModel(
-      this.props.componentData,
-      this.props.question as any,
+      props.componentData,
+      props.question as any,
       null
     );
   }

packages/survey-creator-react/src/adorners/QuestionWidget.tsx

@@ -9,10 +9,10 @@ import {
 import { attachKey2click, ReactElementFactory, SvgIcon } from "survey-react-ui";
 
 export class QuestionWidgetAdornerComponent extends QuestionAdornerComponent {
-  protected createQuestionViewModel(): QuestionAdornerViewModel {
+  protected createQuestionViewModel(props: any): QuestionAdornerViewModel {
     return new QuestionAdornerViewModel(
-      this.props.componentData,
-      this.props.question as any,
+      props.componentData,
+      props.question as any,
       null
     );
   }

packages/survey-creator-react/src/adorners/Row.tsx

@@ -18,10 +18,10 @@ export class RowWrapper extends CreatorModelElement<
   constructor(props: RowWrapperComponentProps) {
     super(props);
   }
-  protected createModel(): void {
+  protected createModel(props: any): void {
     this.model = new RowViewModel(
-      this.props.componentData.creator,
-      this.props.row,
+      props.componentData.creator,
+      props.row,
       null
     );
   }

packages/survey-creator-react/src/toolbox/ToolboxItem.tsx

@@ -32,8 +32,8 @@ export class SurveyCreatorToolboxTool extends CreatorModelElement<
   constructor(props) {
     super(props);
   }
-  protected createModel(): void {
-    this.model = new ToolboxToolViewModel(this.item, this.props.creator);
+  protected createModel(props: any): void {
+    this.model = new ToolboxToolViewModel(props.item, props.creator);
   }
   protected getUpdatedModelProps(): string[] {
     return ["creator", "item"];
@@ -89,9 +89,9 @@ export class SurveyCreatorToolboxItem extends CreatorModelElement<
   constructor(props) {
     super(props);
   }
-  protected createModel(): void {
-    const toolboxItem: IQuestionToolboxItem = this.props.item;
-    this.model = new ToolboxToolViewModel(toolboxItem, this.props.creator);
+  protected createModel(props: any): void {
+    const toolboxItem: IQuestionToolboxItem = props.item;
+    this.model = new ToolboxToolViewModel(toolboxItem, props.creator);
   }
   protected getUpdatedModelProps(): string[] {
     return ["creator", "item"];