add a new currency input #13
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Thanks for contributing! I think we need to re-think the comma masking approach since it's currently modifying the actual value of the input, and therefore what it sends in the form.
I think we can make a few other improvements related to how the styles and attributes are being applied.
src/components/input/input.ts
Outdated
| @@ -249,6 +252,11 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont | |||
| this.emit('sl-change'); | |||
| } | |||
|
|
|||
| private handleCurrencyInput() { | |||
| const numberWithCommas = this.input.value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ","); | |||
| this.input.value = numberWithCommas; | |||
There was a problem hiding this comment.
We probably shouldn't be modifying the value of the input directly, because this will send up a string including the commas when the form is submitted, which we would then have to parse back out on the server. It would also interfere with validation. If you want to do input masking, it should be on the display only, not the actual value.
If we do absolutely need to modify the value, we need to figure out how to undo this mutation when the value is read.
src/components/input/input.ts
Outdated
| this.input.value = numberWithCommas; | ||
| } else { | ||
| this.value = this.input.value; | ||
| this.formControlController.updateValidity(); |
There was a problem hiding this comment.
This line still needs to be called regardless of the currency attribute
src/components/input/input.ts
Outdated
| this.formControlController.updateValidity(); | ||
| if (this.currency === "usd") { | ||
| const numberWithCommas = this.input.value.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ","); | ||
| this.input.value = numberWithCommas; |
There was a problem hiding this comment.
Moving this logic into this method is better than having it inline, but we're still modifying the actual value of the input, which could break forms when we try to use it.
Notion