Skip to content

feat(ui5-step-input): add thousands separator & scrolling#12751

Merged
GDamyanov merged 36 commits into
mainfrom
stepinput-scroll
Jan 16, 2026
Merged

feat(ui5-step-input): add thousands separator & scrolling#12751
GDamyanov merged 36 commits into
mainfrom
stepinput-scroll

Conversation

@GDamyanov

@GDamyanov GDamyanov commented Dec 2, 2025

Copy link
Copy Markdown
Contributor

This PR introduces two new features to the ui5-step-input component:

  • Mouse Wheel Support: Users can now increment or decrement the value using the mouse wheel when the component is focused.
  • Thousand Separator Formatting: The displayed value now uses locale-aware thousand separators for improved readability.

@ui5-webcomponents-bot

ui5-webcomponents-bot commented Dec 2, 2025

Copy link
Copy Markdown
Collaborator

🧹 Preview deployment cleaned up: https://pr-12751--ui5-webcomponents.netlify.app

@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview December 2, 2025 09:38 Inactive
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview December 2, 2025 13:14 Inactive
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview December 3, 2025 08:54 Inactive
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview December 3, 2025 09:01 Inactive
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview December 3, 2025 09:10 Inactive
@GDamyanov GDamyanov changed the title feat(ui5-step-input): enhancements feat(ui5-step-input): add thousands separator & scrolling Dec 3, 2025
@GDamyanov
GDamyanov marked this pull request as ready for review December 3, 2025 09:26
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview December 3, 2025 09:31 Inactive
@GDamyanov
GDamyanov requested a review from hinzzx December 4, 2025 08:57
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview December 5, 2025 07:12 Inactive
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview December 5, 2025 11:21 Inactive

@hinzzx hinzzx left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that we have thousands separator this sometimes causes the _isValueWithCorrectPrecision check to evaluate wrong.

The reason behind that is because we split the number into decilmals and whole numbers. So when we have 500,000 for example, it assumes that the three zeros behind are 'precision' numbers.

@hinzzx

hinzzx commented Dec 8, 2025

Copy link
Copy Markdown
Contributor

We also have a introduced a bug, where when we type a number, and then Submit (e.g. press Enter), if we then try to continue typing it is not working—it was working before.

EDIT: Checked and it worked with different locale, so it might be something related to the comma separators mentioned in the above comment.

Comment thread packages/main/src/StepInput.ts Outdated
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview December 9, 2025 09:55 Inactive
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview January 5, 2026 13:51 Inactive
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview January 6, 2026 12:28 Inactive
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview January 6, 2026 12:42 Inactive
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview January 8, 2026 14:27 Inactive
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview January 9, 2026 14:01 Inactive
Comment thread packages/main/src/StepInput.ts Outdated
const delimiter = this.input?.value?.includes(".") ? "." : ",";
const numberParts = this.input?.value?.split(delimiter);
// @ts-ignore oFormatOptions is a private API of NumberFormat but we need it here to get the decimal separator
const delimiter = this.formatter?.oFormatOptions?.decimalSeparator || ".";

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Usually the formatter is created either with format options passed as parameter or with the locale ones. In that case it will be with the locale ones so I would suggest taking the formatOptions and the decimal separator out of the locale data and not trough this private APi

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in 3c83942

Comment thread packages/main/src/StepInput.ts Outdated
return;
}

const cursorPosition = this._getCursorPosition();

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe caretPosition?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in 3c83942

Comment thread packages/main/src/StepInput.ts Outdated
Comment thread packages/main/src/StepInput.ts Outdated
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview January 12, 2026 12:51 Inactive
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview January 12, 2026 15:10 Inactive
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview January 13, 2026 15:48 Inactive
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview January 15, 2026 12:01 Inactive
@GDamyanov GDamyanov self-assigned this Jan 15, 2026
@GDamyanov
GDamyanov merged commit 6143dfc into main Jan 16, 2026
14 checks passed
@GDamyanov
GDamyanov deleted the stepinput-scroll branch January 16, 2026 09:12
@ui5-webcomponents-bot
ui5-webcomponents-bot temporarily deployed to preview January 16, 2026 09:12 Inactive
@ui5-webcomponents-bot

Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version v2.19.0-rc.2 🎉

The release is available on v2.19.0-rc.2

Your semantic-release bot 📦🚀

@ui5-webcomponents-bot

Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version v2.19.0-rc.2 🎉

The release is available on v2.19.0-rc.2

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants