Form is leaving when typing value in a input number field

amadese · May 18, 2022, 7:23am

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):

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

sara.leslie · May 19, 2022, 1:42am

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

uyen.do · May 19, 2022, 7:17am

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?

amadese · May 25, 2022, 8:31am

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

uyen.do · May 27, 2022, 7:31am

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.

amadese · May 30, 2022, 7:07am

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

uyen.do · June 7, 2022, 4:49am

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.

amadese · June 7, 2022, 6:46am

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 ?

uyen.do · June 7, 2022, 8:04am

Hi,

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

amadese · June 7, 2022, 8:36am

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

amadese · July 12, 2022, 10:46am

Dear @uyen.do 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

amadese · July 26, 2022, 7:53am

Hi,

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

amadese · August 2, 2022, 6:53am

Dear @uyen.do,

The team managing EUI provided us some details:

Do you think that the problem could be solved ?

amadese · October 19, 2022, 7:25am

Dear @uyen.do , 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

kazurayam · October 19, 2022, 12:18pm

@uyen.do already replied

In other words, uyen.do 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?

amadese · October 19, 2022, 12:34pm

@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 @uyen.do suggests that above.

kazurayam · October 19, 2022, 12:50pm

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

anon46315158 · October 19, 2022, 2:50pm

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…

amadese · October 20, 2022, 3:02pm

@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.

grylion54 · October 20, 2022, 3:11pm

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")

WebUI.click(findTestObject('Save'))
WebUI.waitForPageLoad(10)

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.

Topic		Replies	Views
Problem submitting form because AngularJS validation event not firing when valid field values entered Katalon Recorder katalon-recorder	4	1962	August 3, 2022
Katalon recorder issue - Version - 5.10 Build 1 Katalon Studio katalon-studio , bugs-report	3	586	February 1, 2020
Katalon Recorder v 3.5.1 inserts double values in fields Archive katalon-recorder	5	603	April 23, 2018
Outsystems numeric datefield field doesn't set number Katalon Studio katalon-studio , web-testing , outsystems	6	468	October 31, 2023
Selecting auto-complete field? Katalon Studio katalon-studio , web-testing	15	5808	August 10, 2021

Form is leaving when typing value in a input number field

Related Topics