Skip to content

chore(ui5-input): enhance validation for type Number #13384

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nikoletavnv wants to merge 2 commits into
base: main
Choose a base branch
from
+64 −4
Open

chore(ui5-input): enhance validation for type Number #13384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a7600a5
chore(ui5-input): handle dash input for number type in Input component
nikoletavnv Apr 7, 2026
f3878bb
chore: update input event handling to fire change event with correct …
nikoletavnv Apr 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 50 additions & 3 deletions packages/main/src/Input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,11 @@
inputType: string;
}

// // Option 2
// type InputChangeEventDetail = {
// validity?: ValidityState;
// }

type InputSelectionChangeEventDetail = {
item: IInputSuggestionItem | null;
}
Expand Down Expand Up @@ -297,7 +302,10 @@

class Input extends UI5Element implements SuggestionComponent, IFormInputElement {
eventDetails!: {
"change": InputEventDetail,

// Option 2
// "change": InputChangeEventDetail,
"change": InputEventDetail
"input": InputEventDetail,
"select": void,
"_request-submit": void,
Expand Down Expand Up @@ -539,6 +547,14 @@
@property({ type: Boolean, noAttribute: true })
_inputIconFocused = false;

// Option 1
@property({ type: Boolean })
_isDash = false;

// Option 1
@property({ type: Boolean })
_wasDash = false;

/**
* Constantly updated value of texts collected from the associated labels
* @private
Expand Down Expand Up @@ -1193,16 +1209,25 @@
return;
}

let validity = undefined;

Check failure on line 1212 in packages/main/src/Input.ts

View workflow job for this annotation

GitHub Actions / check 

It's not necessary to initialize 'validity' to undefined
if( this.isTypeNumber) {

Check failure on line 1213 in packages/main/src/Input.ts

View workflow job for this annotation

GitHub Actions / check 

Trailing spaces not allowed

Check failure on line 1213 in packages/main/src/Input.ts

View workflow job for this annotation

GitHub Actions / check 

There should be no space after this paren

Check failure on line 1213 in packages/main/src/Input.ts

View workflow job for this annotation

GitHub Actions / check 

Expected space(s) after "if"
validity = this.nativeInput?.validity;

Check failure on line 1214 in packages/main/src/Input.ts

View workflow job for this annotation

GitHub Actions / check 

'validity' is assigned a value but never used
}

const fireChange = () => {
if (!this._isChangeTriggeredBySuggestion) {
// Option 2: Propagate native input validity state to the change event so customers will decide what to do with invalid numeric input
// this.fireDecoratorEvent(INPUT_EVENTS.CHANGE, { validity: validity});
this.fireDecoratorEvent(INPUT_EVENTS.CHANGE);
}

this.previousValue = this.value;
this.typedInValue = this.value;
this._isChangeTriggeredBySuggestion = false;
};

if (this.previousValue !== this.getInputDOMRefSync()!.value) {
// Option 1
if (this.previousValue !== this.getInputDOMRefSync()!.value || this._isDash || this._wasDash) {

Check failure on line 1230 in packages/main/src/Input.ts

View workflow job for this annotation

GitHub Actions / check 

Multiple spaces found before '||'
// if picker is open there might be a selected item, wait next tick to get the value applied
if (this.Suggestions?._getPicker()?.open && this._flattenItems.some(item => item.hasAttribute("ui5-suggestion-item") && (item as SuggestionItem).selected)) {
this._changeToBeFired = true;
Expand Down Expand Up @@ -1263,7 +1288,24 @@
this._input(e, eventType);
}

// // Option 3: keep track of the dash symbol at onBeforeInput

Check failure on line 1291 in packages/main/src/Input.ts

View workflow job for this annotation

GitHub Actions / check 

Trailing spaces not allowed
// _onBeforeInput(e: any) {
// // e.data is null when text is deleted
// // e.data is the pressed symbol otherwise
// console.log(e.data, this.getInputDOMRefSync()?.value);
// }

// Option 1
get isValidNumber(){

Check failure on line 1299 in packages/main/src/Input.ts

View workflow job for this annotation

GitHub Actions / check 

Missing space before opening brace
return this.isTypeNumber && !this._isDash;
}

_input(e: CustomEvent<InputEventDetail> | InputEvent, eventType: string) {
// Option 1
this._wasDash = (e as InputEvent)?.data === null && this._isDash && this.getInputDOMRefSync()?.value === "";
this._isDash = (e as InputEvent)?.data === "-" && this.getInputDOMRefSync()?.value === "";

Check failure on line 1307 in packages/main/src/Input.ts

View workflow job for this annotation

GitHub Actions / check 

Trailing spaces not allowed

Check failure on line 1308 in packages/main/src/Input.ts

View workflow job for this annotation

GitHub Actions / check 

More than 1 blank line not allowed
const inputDomRef = this.getInputDOMRefSync();

const allowedEventTypes = [
Expand Down Expand Up @@ -1404,7 +1446,7 @@
this.open = false;
}

_confirmMobileValue() {
_confirmMobileValue(e: any) {
this._closePicker();
this._handleChange();
}
Expand Down Expand Up @@ -1434,6 +1476,8 @@

if (this._changeToBeFired && !this._isChangeTriggeredBySuggestion) {
this.previousValue = this.value;
// Option 2
// this.fireDecoratorEvent(INPUT_EVENTS.CHANGE, {validity: this.nativeInput?.validity});
this.fireDecoratorEvent(INPUT_EVENTS.CHANGE);
} else {
this._isChangeTriggeredBySuggestion = false;
Expand Down Expand Up @@ -1558,6 +1602,9 @@

this._performTextSelection = true;


//Option 2
// this.fireDecoratorEvent(INPUT_EVENTS.CHANGE, {validity: this.nativeInput?.validity});
this.fireDecoratorEvent(INPUT_EVENTS.CHANGE);

this._isChangeTriggeredBySuggestion = true;
Expand Down
1 change: 1 addition & 0 deletions packages/main/src/InputTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
min={this.nativeInputAttributes.min}
max={this.nativeInputAttributes.max}
onInput={this._handleNativeInput}
// onBeforeInput={this._onBeforeInput}
onChange={this._handleChange}
onSelect={this._handleSelect}
onKeyDown={this._onkeydown}
Expand Down
14 changes: 13 additions & 1 deletion packages/main/test/pages/Input.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,8 @@ <h3> Input required</h3>
<ui5-input id="input-required" value="This input is required" required></ui5-input>

<h3> Input type 'Number'</h3>
<ui5-input id="input-number" type="Number" placeholder="Numbers are allowed only ..."></ui5-input>
<ui5-input id="input-number" show-clear-icon type="Number" placeholder="Numbers are allowed only ...">
</ui5-input>

<ui5-input id="input-number2" type="Number" placeholder="Numbers are allowed only ..."></ui5-input>

Expand Down Expand Up @@ -1233,6 +1234,17 @@ <h3>Capitalization suggestions</h3>
});
}
});

document.getElementById("input-number").addEventListener("ui5-change", event => {
const input = event.target;

// Option 1: Set value state based on validity of the number input
event.target.valueState = input.isValidNumber ? "None" : "Negative";

// // Option 2
// const validity = event.detail.validity;
// event.target.valueState = validity.valid ? "None" : "Negative";
});
</script>
</body>

Expand Down
Loading