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>
<!--bindings={
                             "ng-reflect-ng-if": "true"
}--><!--bindings={
                             "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">
<!--bindings={
                                           "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">
<!--container--></div></div>
</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):
image

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:

input-number.component.html

<div class="row">
    <div class="col-2">
        <label
            *ngIf="isRequired"
            euiLabel
            euiRequired
            for="{{ id }}"
            id="{{ id }}-label"
            >{{ label }}</label
        >

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

        <button
            id="{{ id }}-tooltips"
            euiButton
            [euiRounded]="true"
            [euiIconButton]="true"
            [euiBasicButton]="true"
            [euiInfo]="true"
            [euiSizeL]="true"
            euiTooltip="{{ tooltipText }}"
        >
            <span euiIcon class="eui-icon eui-icon-question-circle"></span>
        </button>
    </div>
    <div class="col-7">
        <input
            euiInputNumber
            min="0"
            id="{{ id }}"
            placeholder="{{ placeholder }}"
            [value]="value"
            (change)="onChange($event)"
        />
    </div>
</div>

input-number.component.ts

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

@Component({
    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 {
        this.onInputChange(
            (event.target as HTMLInputElement).value !== ''
                ? parseFloat((event.target as HTMLInputElement).value)
                : null
        );

        // Tell the formControl that the component was touched
        this.onInputTouch();
    }
}

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

https://eui.ecdevops.eu/eui-showcase-ux-components-13.x/style-guide/directives/eui-input-number

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.

Dear @uyen.do,

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.

Dear @uyen.do

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 ?

Hi,

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

1 Like

@uyen.do
Thanks a lot, it will help us a lot :slight_smile: