Fixed #8254 - [React] Console Warnings when running the Form Library …

…demo - Warning: Cannot update during an existing state transition (such as within render)

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

@@ -7,51 +7,51 @@ 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();
+ if (!this.model.dropdownListModel) {
+ this.model.dropdownListModel = new DropdownListModel(this.model);
  }
+ }
 
-  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 || "";
  }
  }
+ }
 }

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.dropdownListModel) {
+ this.dropdownListModel = new DropdownListModel(this);
+ }
+ }
  protected getCompactRenderAs(): string {
  return (this.displayMode == "buttons") ? "default" : "dropdown";
  }