Form is leaving when typing value in a input number field

Dear Support team,

Our application used an additional feature “EUI 13” with Angular: there are additional components with EUI.
For instance we have euiinputnumber components: an example with the html generated:

<input-number _ngcontent-lcj-c515="" formcontrolname="budget" label="Budget" id="im-input-number-budget" placeholder="" ng-reflect-label="Budget" ng-reflect-id="im-input-number-budget" ng-reflect-placeholder="" ng-reflect-name="budget" ng-reflect-tooltip-text="Indicate the estimated annual " ng-reflect-is-required="true" class="ng-untouched ng-pristine ng-valid"><div class="row">
<div class="col-2"><label euilabel="" euirequired="" ng-reflect-eui-required="" for="im-input-number-budget" id="im-input-number-budget-label" aria-disabled="false" class="eui-label eui-label--required ng-star-inserted">Budget</label>
                             "ng-reflect-ng-if": "true"
                             "ng-reflect-ng-if": "false"
<button euibutton="" class="mat-tooltip-trigger eui-button eui-button--basic eui-button--icon-only eui-button--info eui-button--rounded eui-button--size-l eui-tooltip eui-tooltip--above eui-tooltip--arrows eui-tooltip--content-center" id="im-input-number-budget-tooltips" ng-reflect-eui-tooltip="Indicate the estimated annual " ng-reflect-eui-rounded="true" ng-reflect-eui-icon-button="true" ng-reflect-eui-basic-button="true" ng-reflect-eui-info="true" ng-reflect-eui-size-l="true" aria-disabled="false" data-e2e="eui-button" aria-describedby="cdk-describedby-message-36" cdk-describedby-host=""><span class="eui-button__container">
                                           "ng-reflect-ng-if": "false"
<span euiicon="" class="eui-icon eui-icon-question-circle" aria-disabled="false" role="img" aria-label="eUI Icon"></span></span></button>
<!--container--></div><div class="col-10">
<input euiinputnumber="" min="0" ng-reflect-id="im-input-number-budget" placeholder="" ng-reflect-placeholder="" aria-disabled="false" id="im-input-number-budget" type="eui-number" class="eui-input-number">

I’m trying to test with Katalon our form by sending values in the different fields and I get a strange behaviour with the input-number (only with Katalon Recorder - when filling manually a value in the field, this behaviour is not present).
Here my test:

After executing the step, the value is not sent to the form: the test failed because the application considered that the form is going to be left:: the native popo-up as for closing the browser appeared (and it should not appear):

When clicking the ok button, the error appears:

TypeError: Cannot read properties of undefined (reading 'length')
    at EuiInputNumberComponent.onKeyDown (http://localhost:4200/vendor.js:203125:15)
    at EuiInputNumberComponent_keydown_HostBindingHandler (http://localhost:4200/vendor.js:203380:20)
    at executeListenerWithErrorHandling (http://localhost:4200/vendor.js:128880:16)
    at wrapListenerIn_markDirtyAndPreventDefault (http://localhost:4200/vendor.js:128918:22)
    at HTMLInputElement.<anonymous> (http://localhost:4200/vendor.js:177366:34)
    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3562:35)
    at Object.onInvokeTask (http://localhost:4200/vendor.js:139379:33)
    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3561:40)
    at Zone.runTask (http://localhost:4200/polyfills.js:3329:51)
    at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:3644:38)

Could you please help me with that and understand why the system considers the action to leave the form when typing value in the input number field with Katalon ?

Thanks in adavnce for your help

We are escalating this question internally to get you help. Thank you, Sara

Hi there,

We have reproduced your case and it works fine on our end. Could you provide us with your test script so we could see how you set it up?

There the part of the scripts about the input number:


<div class="row">
    <div class="col-2">
            for="{{ id }}"
            id="{{ id }}-label"
            >{{ label }}</label

        <label *ngIf="!isRequired" euiLabel for="{{ id }}" id="{{ id }}-label"
            >{{ label }}</label

            id="{{ id }}-tooltips"
            euiTooltip="{{ tooltipText }}"
            <span euiIcon class="eui-icon eui-icon-question-circle"></span>
    <div class="col-7">
            id="{{ id }}"
            placeholder="{{ placeholder }}"


import { Component, forwardRef, Input } from '@angular/core';
import {
} from '@angular/forms';

    selector: 'input-number',
    templateUrl: 'input-number.component.html',
    providers: [
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => InputNumberComponent),
            multi: true
export class InputNumberComponent implements ControlValueAccessor {
    @Input() id?: string;
    @Input() label!: string;
    @Input() placeholder!: string;
    @Input() tooltipText?: string;
    @Input() isRequired = false;

    value!: number;
    private onInputChange!: Function;
    private onInputTouch!: Function; // Check if the form is touched or dirty

    // Write the value coming from the form
    writeValue(value: number): void {
        if (value === undefined) {
            this.value = 0;
        } else {
            this.value = value;

    registerOnChange(fn: Function): void {
        this.onInputChange = fn;

    registerOnTouched(fn: Function): void {
        this.onInputTouch = fn;

    onChange(event: Event): void {
            ( as HTMLInputElement).value !== ''
                ? parseFloat(( as HTMLInputElement).value)
                : null

        // Tell the formControl that the component was touched

I provide you also the link of the EUI 13 library providing the components:

Please tell me if you need more details

Hi there,

There seems to be a blockage in the library you’re using. Try command “setText” instead of “sendKeys” and let me know if that works out for you.


Thanks for the response, I tried with setText, the step is correctly passing: the value is properly set in the form (without trying to leave the form), but it seems that when saving the form, the value is not taken in account in the validation of the form and sent to the backend, as it was previously. The formcontrolname is not updated with the value.

Could you help me with that ?

Could you please provide me more information about the blockage, I will forward it to the team managing EUI in order to solve this issue (if possible) ?

Thank you in advance for your help

Hi there,

Unfortunately we’re not currently supporting numeric values with those commands, only characters or string. The only way for you to get that to work is change your numeric value to string value.

Hope that helps.


With the standard input text field, all was correctly working (set the number value in the field with Katalon with sendKeys or type).

From now I understand that it’s not possible to set the number with the eui input number field with type or sendKeys.

When I’m using setText the value is correctly set in the eui input field, but when submitting the form, the value is not taken in account (0 is sent to the backend). When I did the action without Katalon, it’s correctly working and the value is correctly sent.

Could you please help me with that ?


The reason behind it is because setText is not currently supporting numeric values like your value. We’ll get that updated soon.

1 Like
Thanks a lot, it will help us a lot :slight_smile:

Dear Could you tell me please when setText will support numeric values like we want ? It will be great to have that because for the moment we are still blocking with our tests.

Thanks a lot


Someone could tell me please when setText will support numeric values like we want ? It will be great to have that because for the moment we are still blocking with our tests.

Thanks for your help


The team managing EUI provided us some details:

Do you think that the problem could be solved ?

1 Like

Dear , Dear @ThanhTo , Do you have news about this topic ? Could you tell me please when setText will support numeric values like we want ? It will be great to have that because for the moment we are still blocking with our tests.

Thank you for your support, patience and help.

Regards already replied

In other words, suggested that you, @amadese, should be able to modify your test script in Katalon Recorder so that it converts a numeric value of ${budget} to a string. Then the test will run. Why not you try it?

@kazurayam Thakns for your response. The problem is that the field in backend (when saving) should be a number and not a string. That’s why it must be a number.

This issue (form is leaving) is still appearing when using type or sendKeys with a string or a number. It’s only appearing when using Katalon. As explained by the eui iteam, it seems that it’s an issue coming from the tool and the incorrect management of the event (see my previous comments). But I’m not an expert with that…

When using settext, the value is setted in the field but not saving after clicking the save button (backend is properly working because if we don’t use Katalon, it’s working properly).
The old value is sent to the backend even if the value is inserted in the form by using settext. I don’t understand why this behaviour is present when using Katalon…

Furthermore I would like to know if there will have a new update of the tool as suggests that above.

Well, I don’t understand the problem. I will quit.

this makes no sense. when a user type something, the keyboard sends keycodes. which are received as chars by any sane desktop application.
a string is just a bunch of chars.
how this is converted into number or something else, it is at the latitude of the application in use when is sending data to the backend
somebody is lying to you…

@bionel, ok perhaps the eui team has not the good response, but could you please explain me why the value setted with settext is not passed to the backend when pushing the save button (with a number or a text, the issue is the same).

Indeed before to use settext here the value in the form (coming from the database):

I’m using this test for pushing the new value with settext:

This test is passing.
The variable is now a string:

At this moment we have the value correctly setted in the field:

After clicking the Save button, the patch request is done, but the new value is not sent, the old value is still sent to the backend:

This issue is not appearing when I don’t use Katalon and if I do manually the different steps.

Remove the comma from your dollar field. The page itself may format the display, to appear with comma or dollar sign. In your setText(), just set:

WebUI.setText(findTestObject('...'), "50000.00")'Save'))

WebUI.verifyElementAttributeValue(findTestObject('...'), "value", "50,000.00", 10)

Edit: Sorry. I see now that you are using Katalon Recorder, so you will have to enter your code as per its parameters, but the idea is the same.