Bug/8254 - Console Warnings when running the Form Library demo - Warn…

…ing: Cannot update during an existing state transition (such as within render) (#8282)

* Fixed #8254 - [React] Console Warnings when running the Form Library demo - Warning: Cannot update during an existing state transition (such as within render)

* Work for #8254 - Console Warnings when running the Form Library demo - Warning: Cannot update during an existing state transition (such as within render) - refactoring - get rid of unnecessary code

* Work for #8254 - fixed tests

* Fixed lint

---------

Co-authored-by: tsv2013 <[email protected]>

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

@@ -7,51 +7,48 @@ import { BaseAngular } from "../../base-angular";
  templateUrl: "./dropdown.component.html"
 })
 export class DropdownComponent extends BaseAngular implements OnInit {
-  @Input() model: any;
-  @ViewChild("inputElement") inputElementRef!: ElementRef<HTMLDivElement>;
-  get dropdownModel(): DropdownListModel {
-  return this.model?.dropdownListModel;
-  }
-  protected getModel() {
-  return this.model.dropdownListModel;
-  }
+ @Input() model: any;
+ @ViewChild("inputElement") inputElementRef!: ElementRef<HTMLDivElement>;
+ get dropdownModel(): DropdownListModel {
+ return this.model?.dropdownListModel;
+ }
+ protected getModel() {
+ return this.model.dropdownListModel;
+ }
 
- override ngOnInit(): void {
- super.ngOnInit();
- if (!this.model.dropdownListModel) {
- this.model.dropdownListModel = new DropdownListModel(this.model);
- }
- }
+ override ngOnInit(): void {
+ super.ngOnInit();
+ }
 
-  click(event: any) {
-  this.dropdownModel?.onClick(event);
-  }
+ click(event: any) {
+ this.dropdownModel?.onClick(event);
+ }
  chevronPointerDown(event: any) {
  this.dropdownModel?.chevronPointerDown(event);
- }
- clear(event: any) {
- this.dropdownModel?.onClear(event);
- }
- keyhandler(event: any) {
- this.dropdownModel?.keyHandler(event);
- }
- blur(event: any) {
- this.dropdownModel?.onBlur(event);
- this.updateInputDomElement();
- }
- focus(event: any) {
- this.dropdownModel?.onFocus(event);
- }
- inputChange(event: any) {
- this.detectChanges();
- }
- updateInputDomElement() {
- if (!!this.inputElementRef?.nativeElement) {
- const control: any = this.inputElementRef.nativeElement;
- const newValue = this.model.inputStringRendered;
- if (!Helpers.isTwoValueEquals(newValue, control.value, false, true, false)) {
- control.value = this.model.inputStringRendered || "";
- }
+ }
+ clear(event: any) {
+ this.dropdownModel?.onClear(event);
+ }
+ keyhandler(event: any) {
+ this.dropdownModel?.keyHandler(event);
+ }
+ blur(event: any) {
+ this.dropdownModel?.onBlur(event);
+ this.updateInputDomElement();
+ }
+ focus(event: any) {
+ this.dropdownModel?.onFocus(event);
+ }
+ inputChange(event: any) {
+ this.detectChanges();
+ }
+ updateInputDomElement() {
+ if (!!this.inputElementRef?.nativeElement) {
+ const control: any = this.inputElementRef.nativeElement;
+ const newValue = this.model.inputStringRendered;
+ if (!Helpers.isTwoValueEquals(newValue, control.value, false, true, false)) {
+ control.value = this.model.inputStringRendered || "";
  }
  }
+ }
 }

packages/survey-vue3-ui/src/components/dropdown/Dropdown.vue

@@ -130,10 +130,6 @@ import { computed, onMounted, onUpdated, ref } from "vue";
 const props = defineProps<{ question: Question }>();
 const inputElement = ref<HTMLElement>(null as any);
 const model = computed(() => {
- const question = props.question;
- if (!question.dropdownListModel) {
- question.dropdownListModel = new DropdownListModel(question);
- }
  return props.question.dropdownListModel;
 });
 const click = (event: any) => {

src/knockout/components/dropdown/dropdown.ts

@@ -29,9 +29,6 @@ ko.components.register("sv-dropdown", {
  const focus = (_: any, e: any) => {
  q.dropdownListModel?.onFocus(e);
  };
- if (!q.dropdownListModel) {
- q.dropdownListModel = new DropdownListModel(params.question);
- }
  new ImplementorBase(q.dropdownListModel);
  return { question: q, model: q.dropdownListModel, click: click, clear: clear, keyhandler: keyhandler, blur: blur, focus: focus, chevronPointerDown: chevronPointerDown };
  },

src/question.ts

@@ -2551,13 +2551,17 @@ export class Question extends SurveyElement<Question>
  protected getDesktopRenderAs(): string {
  return "default";
  }
+ protected onBeforeSetCompactRenderer(): void { }
+ protected onBeforeSetDesktopRenderer(): void { }
  protected processResponsiveness(requiredWidth: number, availableWidth: number): any {
  availableWidth = Math.round(availableWidth);
  if (Math.abs(requiredWidth - availableWidth) > 2) {
  const oldRenderAs = this.renderAs;
  if (requiredWidth > availableWidth) {
+ this.onBeforeSetCompactRenderer();
  this.renderAs = this.getCompactRenderAs();
  } else {
+ this.onBeforeSetDesktopRenderer();
  this.renderAs = this.getDesktopRenderAs();
  }
  return oldRenderAs !== this.renderAs;

src/question_rating.ts

@@ -861,6 +861,11 @@ export class QuestionRatingModel extends Question {
  protected supportResponsiveness(): boolean {
  return true;
  }
+ protected onBeforeSetCompactRenderer(): void {
+ if (!this.dropdownListModelValue) {
+ this.dropdownListModel = new DropdownListModel(this);
+ }
+ }
  protected getCompactRenderAs(): string {
  return (this.displayMode == "buttons") ? "default" : "dropdown";
  }
@@ -878,6 +883,9 @@ export class QuestionRatingModel extends Question {
  this.updateElementCss();
  }
  public get dropdownListModel(): DropdownListModel {
+ if (this.renderAs === "dropdown") {
+ this.onBeforeSetCompactRenderer();
+ }
  return this.dropdownListModelValue;
  }
  protected updateCssClasses(res: any, css: any) {

src/react/dropdown-base.tsx

@@ -51,9 +51,6 @@ export class SurveyQuestionDropdownBase<T extends Question> extends SurveyQuesti
  {this.renderReadOnlyElement()}
  </div>;
  } else {
- if (!(this.question as any)["dropdownListModel"]) {
- (this.question as any)["dropdownListModel"] = new DropdownListModel(this.question);
- }
  selectElement = <>
  {this.renderInput(this.question["dropdownListModel"])}
  <Popup model={this.question?.dropdownListModel?.popupModel}></Popup>

src/vue/components/dropdown/dropdown.vue

@@ -119,9 +119,6 @@ export class DropdownComponent extends BaseVue {
  return this.question.dropdownListModel;
  }
  getModel() {
- if (!this.question.dropdownListModel) {
- this.question.dropdownListModel = new DropdownListModel(this.question);
- }
  return this.model;
  }