Textbox border blinks on first load when rendered with popup

[kosgdk]

Description

When a kendo-textbox is rendered in the same view as a kendo-popup, its border color visibly changes after initial paint: it first appears with the browser’s default border color (black), then transitions to the Kendo-styled border color (light grey). That transition causes a noticeable “blink” or flash.

Steps To Reproduce

1. Open this example https://stackblitz.com/edit/angular-z5b5j5ta
2. Hit Refresh button in virtual browser window

Screenshots or video

chrome_cx20S4Svpb.mp4

Actual Behavior

Border styles transition applied on first render

Expected Behavior

No style transition applied on first render

Browser

Chrome

Browser version

latest

OS type

MacOS, Windows

OS version

No response

Last working version of the Kendo UI for Angular package (if regression).

No response

[dtopalov]

@kosgdk,

Thank you for reporting this, it seems that there is some issue observable when this specific combination of components is used and more specifically - related to the order of applying of some classes.

As a workaround, developers can place the k-input class on the kendo-textbox component which seems to resolve the observed problem:

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

[kosgdk]

Hi @dtopalov,
Thanks for fast response.
Actually there are more component combinations causing this behavior: kendoButton, kendo-multiselect, kendo-dateinput are affected by kendo-grid as well alongside with other CSS properties being transitioned (color, background-color).
And yep - in this case host elements of kendo components are initially rendered without classes, so when the classess being applied on subsequent render, CSS transition takes place.

It's quite inconvenient to apply CSS class to all the components across large projects, so I came up with the following workaround:

button[kendobutton],
kendo-multiselect,
kendo-dateinput,
kendo-textbox {
    animation: suppress-initial-transition 0s forward;
}

@keyframes suppress-initial-transition {
    from {
        color: inherit;
        border-color: inherit;
        background-color: inherit;
    }
}

This somehow suppress initial transition keeping desired styles.

[dtopalov]

Hi @kosgdk,

Thank you for the additional information and workaround provided. This helped us pinpoint the root cause of the issue to changes in the kendo themes, related to a newly introduced motion system, coming in v. 12.3.0 - https://github.com/telerik/kendo-themes/releases/tag/v12.3.0

The last working Kendo UI for Angular version - kendo theme version combination is Kendo UI for Angular 22.0.1 + kendo theme 12.2.3:

https://stackblitz.com/edit/angular-z5b5j5ta-hx6wcqze?file=package.json

We will discuss the issue further and try to provide a solution in a timely manner. Apologies for the caused inconvenience.

[inikolova]

After further investigation and sync with @dtopalov, we agreed that this issue should be handled by the Angular team, as it is due to some Angular-specific behaviour.