[Input] How can I get the value if the input value is not a valid number for type="Number" Input?

[Xidai]

Consider this scenario, there is a Input with type="Number", I only type '-' into the Input and focus out, the '-' is not a valid number, so the event.target.value returns empty, but what we need is to highlight it with error state to tell the user this is not a valid number so that he/she should modify it. But I can not get the real input '-'. Is there any way I can achieve that?

[nnaydenow]

Hi @Xidai,

If the input is initially empty you can check on change if the value is empty or parsed to int if it's NaN.

That's how native input also works: https://jsbin.com/babokidexe/1/

For me it seems reasonable to add something that might help with that validation. As in native works you can use :valid / :invalid selectors not only the value itself.

[nnaydenow]

I opened issue as a feature request from the discussion: #10479

[nikoletavnv]

Hi @Xidai,
Possible solution is for applications to listen to both change and focusout events of the numeric input. When a user types '-' in an empty input and leaves the input , change event will not be fired because the value is not modified - it is empty string regardless the typed '-' or '+' sign. But the users can listen to focusout event and check the validity state of the native input which will be false in that case:

document.getElementById("inputId").addEventListener("focusout", (e) => {
const invalidNumber = e.target.shadowRoot.querySelector("input").validity.badInput;
// set the value state of the input depending on the invalidNumber value;
...
});
The focusout event should also be used in case the user enters '-' and then deletes it and leaves the input empty, because in that case a change event will also not be fired.

For CSS purposes the users can still use the CSS Part we are exposing, but they can only use it for styling the input not showing a value state message:
[ui5-input]::part(input):invalid{background-color: red;}

Kind regards,
Nikoleta