How to set the id field of the k-input-inner

[Mark]

I've been tasked to automate testin, Selenium looks for id fields to be able to push key presses, in the following example I set the id fiels of the maskedtextbox, but I need to set the input of the k-input-inner class.

 

<kendo-maskedtextbox _ngcontent-umi-c628="" size="large" formcontrolname="zip" mask="00000" id="ado-enter-zip" class="form-control k-input k-maskedtextbox ng-untouched ng-pristine ng-invalid k-input-lg k-rounded-md k-input-solid" ng-reflect-size="large" ng-reflect-mask="00000" ng-reflect-name="zip" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="k-input-inner" id="k-b18d4bf0-e10d-4b7f-a91f-23949992563d" tabindex="0" ng-reflect-events="[object Object]" aria-placeholder="00000" aria-invalid="false" aria-labelledby="k-fdc7408b-77b2-4dbb-b0ef-cc949b00b7cb"></kendo-maskedtextbox>

<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="k-input-inner" id="k-b18d4bf0-e10d-4b7f-a91f-23949992563d" tabindex="0" ng-reflect-events="[object Object]" aria-placeholder="00000" aria-invalid="false" aria-labelledby="k-fdc7408b-77b2-4dbb-b0ef-cc949b00b7cb">

is there a way to do this?

 

Thanks

[Theerthagiri]

Hi Team,

I am also facing same issue, so any work around solution for this issue.

[Martin Bechev]

Hi Mark, Theerthagiri,

The inner <input /> element with class .k-input-inner, has its own id already set, but in case it needs to be customized, a custom JavaScript logic needs to be used:

ngAfterViewInit(){
     document.querySelector('kendo-maskedtextbox .k-input-inner').id = 'myID'
}

[Total Soft]

using DOM manipulation would a punctual way for fixing this issue

document.querySelector('kendo-maskedtextbox .k-input-inner').id = 'myID',

but when tacking about testing complex apps/pages (with much more kendo text components), maybe a workaround that involves dynamic grabbing of fields IDs for further use in testing purposes or changing the way the automated testing is done, would fit better

[Total Soft]

try using some custom extra class instead id (also keeping the k-input-inner class)

<kendo-maskedtextbox with [inputAttributes]="{"class":"k-input-inner your-custom-class"}" ...

[Total Soft]

inputAttributes

{[key: string]: string}

Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.

unfortunately changing the inner field id with inputAttributes doesn't work

[Martin Bechev]

Hi Ionela,

The developer can use the inputAttributes property to set custom CSS classes to the inner input, but should also keep the classes applied to the input by default (k-input-inner). This is required, becuase the inputAttributes overwrites the built-in styles and the component will be visually broken otherwise:

<kendo-textbox
                placeholder="Type you username"
                [maxlength]="maxlength"
                [clearButton]="true"
                (valueChange)="onValueChange($event)"
                [inputAttributes]="{'class':'k-input-inner myClass'}"
            >
            </kendo-textbox>