Skip to content

Locale Inputs, Resolving broken embroiderer dependencies, Unfocus Formatting#541

Closed
ErvinSabic wants to merge 26 commits intoCrowdStrike:mainfrom
ErvinSabic:main
Closed

Locale Inputs, Resolving broken embroiderer dependencies, Unfocus Formatting#541
ErvinSabic wants to merge 26 commits intoCrowdStrike:mainfrom
ErvinSabic:main

Conversation

@ErvinSabic
Copy link
Copy Markdown
Contributor

This seeks to solve a few issues:

#468
#483

Dependency issue mentioned by Windvis here - #540 (comment)

Will mark as ready when I believe it can be submitted for review.

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Jan 18, 2025

⚠️ No Changeset found

Latest commit: 3e353ae

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@simonihmig
Copy link
Copy Markdown
Contributor

Hey @ErvinSabic, thanks for working on this! Just kicked off CI. Tests including Embroider are passing! 🎉 But some type errors, fyi

@ErvinSabic
Copy link
Copy Markdown
Contributor Author

Yep! Still working on it. o7

@ErvinSabic
Copy link
Copy Markdown
Contributor Author

ErvinSabic commented Mar 9, 2025

@simonihmig I encourage you to give this a try locally. I'm going to be writing more tests for it and I want to try it on a mobile device as well to see what happens with the caret positioning.

It should work for:
Whole numbers,
Decimals,
Currencies,
Percentages,
Units. (Mostly)

Does not support:
Scientific Notation
Compact Notation

It is worth noting that there are edge cases with the way Intl.NumberFormat may handle some things. For example, in a Saudi Arabian Locale if you enter "2" in a input that is setup for units, and the units being liters, that locale actually has a specific word that communicates "2 liters". Just based on my testing. I imagine it's much like how an American might call "12 eggs" a "dozen eggs". Though I'm not a linguist and I don't speak arabic. I'm stopping here because if I keep chasing edge cases this will never get done and in its current form supports the majority of use cases one might expect out of a component like this.

@ErvinSabic ErvinSabic marked this pull request as ready for review March 15, 2025 21:31
@ErvinSabic ErvinSabic changed the title WIP: Locale Inputs, Resolving broken embroiderer dependencies, Unfocus Formatting Locale Inputs, Resolving broken embroiderer dependencies, Unfocus Formatting Mar 15, 2025
Copy link
Copy Markdown
Contributor

@simonihmig simonihmig left a comment

Choose a reason for hiding this comment

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

@ErvinSabic thanks a lot for your effort, and sorry again for the late feedback!

I think it would really help if we could split this PR into the three different issues/features it tackles!

  1. the dependency updates are really good and uncontroversial, so would be nice to get them in asap
  2. for the number input issue #468, I left a comment here
  3. the new locale-number component seems quite massive, I would need to play with that locally. It seems to do much more than fixing #483, like adding unit support, right? This is interesting, but really a completely new feature. Even just for changelog generation, it would help to have this extracted. On the #483 issue though, I left some comments there. There seems to be a misunderstanding as the native number input does correctly handle localized numbers (at least for me), and you cannot opt-out of localized rendering. On my machine it will always render with a comma as the decimal separator. But also as mentioned there, that assumed parseFloat issue might not even be an issue.

this.args.setValue(
this.type === 'number' ? parseFloat(e.target.value) : e.target.value
);
this.args.setValue(e.target.value);
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.

Hm, I don't think we can do that. This would mean when inputting, the value is set as a string, but when focussing out as a number. The user might not see the difference in the UI, but the internal value would be flip-flopping between string and number. This could have effects on the validation (if used). Like when you have a custom validator or using yup for example, the validation result might be different based on whether the value is a string or a number!

Copy link
Copy Markdown
Contributor Author

@ErvinSabic ErvinSabic Apr 7, 2025

Choose a reason for hiding this comment

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

Wouldn't parsing as a number in here cause the original issue (#468) because the user isn't done typing?

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.

In this comment I was suggesting to just not call setValue, when the (string) value is in that kinda interim state where parseFloat wouldn't produce a new number.

Something like

const valueAsNumber = parseFloat(e.target.value);
if (valueAsNumber !== this.args.value) {
  this.args.setValue(valueAsNumber);
}

Now when typing 2.01...

  • parseFloat('2') -> setValue(2)`
  • `parseFloat('2.') is still 2, so same value, don't call setValue
  • `parseFloat('2.0') is still 2, so same value, don't call setValue
  • parseFloat('2.01') is 2.01 -> setValue(2.01)`

Does that make sense?

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.

Gotcha. Let me break this PR up into their respective issues and work on it further.

@ErvinSabic
Copy link
Copy Markdown
Contributor Author

Closing this PR as I've broken the changes up into their respective PRs -

#550
#551
#552

@ErvinSabic ErvinSabic closed this Apr 23, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants