autoFocusedElement + Floating Label = Error

[Joel]

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>

[Joel]

By the way, I also put together a repro on StackBlitz: https://stackblitz.com/edit/angular-2fng8f?file=app/app.component.ts

[Joel]

In my code, I got a similar error when using kendo-textbox (rather than input), so I did more research and added a detectChanges() to my code.  That ended up working around this issue as well.  I have added that to the open() function of the StackBlitz above.  Uncomment the detectChanges() line to prevent the error.  That said, I'm not sure if this is the appropriate way to handle the issue, so I will wait for an official answer.

[Martin]

Hello Joel,

Thank you for the provided feedback and demo.

It looks like an issue on our side, related to the FloatingLabel component. Thus I logged a new issue in our GitHub issue tracker. Please subscribe for it in order to be notified in a timely manner when there is any update:

https://github.com/telerik/kendo-angular/issues/3511

In a sign of gratitude for pointing our attention to this issue, I updated your Telerik points

Regarding the used workaround, I can confirm that it is valid.

Another approach that could be taken is to focus manually the textbox element by handling the onStable event of the NgZone:

  public open() {
    this.opened = true;

    // Uncomment line below to workaround issue
    this.zone.onStable.pipe(take(1)).subscribe(() => {
      document.querySelector('#username input').focus()
    } )
  }

or using setTimeout:

public open() {
    this.opened = true;
    // Uncomment line below to workaround issue
    setTimeout(() => document.querySelector('#username input').focus())
  }

Please accept our apologies for the caused inconvenience.

As a side note I want to mention that the kendoTextBox directive is deprecated and it should be used for styling purposes only:

https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/textbox-directive/

Regards,
Martin
Progress Telerik

[Joel]

Thanks for getting back to me.  I previously tried using the kendo-textbox component.  Besides the timing issues I mentioned above (resolved by detectChanges()), the TextBox component also displays "undefined" for uninitialized properties of a new() entity/model object.  Whereas the standard input displays a blank value as desired.  I would rather not have to explicitly initialize every property on my entity/model object, so I reverted to using input.  In the TextBox component, is there an easy way to prevent displaying "undefined"?

[Martin]

Hi Joel,

I am not sure that I understand correctly the use case. However, the undefined value in TextBox component appears when the value property of the component is bound to a field that is not set.

To avoid that, omit setting the value property, or pass a default value:

https://stackblitz.com/edit/angular-2fng8f-qdty98

Regards,
Martin
Progress Telerik

 

[Joel]

I'm using ngModel rather than value, but I'm sure the reason is the same.  I'm binding to an object/class generated from an ASP.NET Web API back-end (via Swagger and NSwag), and there are no default values for the properties when I create a new() object.  A standard input does not display "undefined" in this case, so I wondered if the Kendo UI TextBox could be configured to have the same behavior.  No big deal. I am able to handle this by setting DefaultValue attributes in the back-end.  Thanks for the help.

[Asit]

Thanks guys for the inputs. However i am not able to fix for children component.

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

[Joel]

@Asit, Try adding change detection in the open() function of app.component:

constructor(private cd: ChangeDetectorRef) {}

  public open(): void {

    this.opened = true;

    this.cd.detectChanges();

  }