Telerik Forums
Kendo UI for Angular Forum
0 answers
100 views

Using autoFocusedElement to auto focus the dialog elements when it open. The focus functionality is working as per expected. However i am getting Angular lifecycle error while i use kendo-floatinglabel for the kendo-textbox. 

  • Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'k-focus': 'false'. Current value: 'true'.. Find more at https://angular.io/errors/NG0100
  •  

    Here is the stackblitz - https://stackblitz.com/edit/angular-oqmcb8?file=src%2Fapp%2Ftext.component.ts

     

    Asit
    Top achievements
    Rank 1
     asked on 28 Oct 2022
    1 answer
    564 views

    I am using autoFocusedElement to set focus to the first input on a dialog as described at https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/initial-focus/.  When that input is wrapped in a floating label, it appears to work, but it produces the following error in the console:  

    ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'k-state-focused: false'. Current value: 'k-state-focused: true'.

    Am I doing something wrong, or is there anything I can do to work around this?  Here is the modified template that I used to reproduce the error:


            <div class="example-wrapper">
                <button kendoButton *ngIf="!opened" (click)="open()">Open dialog</button>
                <kendo-dialog *ngIf="opened"
                    autoFocusedElement="#username"
                    title="Please confirm"
                    (close)="close('cancel')"
                    [minWidth]="250"
                    [width]="450"
                >
                    <div style="margin: 30px; text-align: center;">
                        <p>Enter your username below</p>
    
                        <kendo-floatinglabel text="User Name">
                          <input kendoTextBox id="username" placeholder="Your username" style="width: 200px"/>
                        </kendo-floatinglabel>
                    </div>
                    <kendo-dialog-actions>
                        <button kendoButton (click)="close('no')">No</button>
                        <button kendoButton (click)="close('yes')" primary="true">Yes</button>
                    </kendo-dialog-actions>
                </kendo-dialog>
            </div>

    Martin
    Telerik team
     answered on 22 Nov 2021
    Top users last month
    horváth
    Top achievements
    Rank 2
    Iron
    Iron
    Steve
    Top achievements
    Rank 2
    Iron
    Erkki
    Top achievements
    Rank 1
    Iron
    Mark
    Top achievements
    Rank 2
    Iron
    Iron
    Veteran
    Jakub
    Top achievements
    Rank 1
    Iron
    Want to show your ninja superpower to fellow developers?
    Want to show your ninja superpower to fellow developers?