fix(input-number): allow editing of numbers that start with zeros by josercarcamo · Pull Request #11705 · Esri/calcite-design-system

josercarcamo · 2025-03-06T19:27:38Z

Related Issue: #9611

Summary

Allows editing of numbers that start with zeros

josercarcamo · 2025-03-06T20:47:05Z

@benelan could you please review?

benelan

There are some cases that don't work with this regex solution, can you take another look? Please reach out if you have any questions or if you'd like some implementation ideas!

benelan · 2025-03-10T21:54:57Z

-      hasTrailingDecimalSeparator && isValueDeleted
-        ? `${newLocalizedValue}${numberStringFormatter.decimal}`
-        : newLocalizedValue;
+    const re = new RegExp(`^-?0+\\d*${numberStringFormatter.decimal}?$`);


There are some issues with this regex:

The - won't work in some locales, you can use numberStringFormatter.minusSign instead

The 0 won't work for other numbering systems

The \d won't work for other numbering systems

There will likely be issues when the groupSeparator property is enabled. You can access the locale's group separator with numberStringFormatter.group

There can be an e in the number, e.g. 10e2

But the code is currently using this exact notation in lines 133-137 of number.ts:

const allLeadingZerosOptionallyNegative = /^([-0])0+(?=\d)/; const decimalOnlyAtEndOfString = /(?!^\.)\.$/; const allHyphensExceptTheStart = /(?!^-)-/g; const isNegativeDecimalOnlyZeros = /^-\b0\b\.?0*$/; const hasTrailingDecimalZeros = /0*$/;

Plus all current e2e tests pass.

Plus all current e2e tests pass.

The existing tests don't cover this leading zero bug, which is why they aren't failing. However, the test you added wouldn't pass if you modified it to use the group-separator attribute. Same goes for the other cases I mentioned in my previous comment.

But the code is currently using this exact notation in lines 133-137 of number.ts:

My bad, the use of numberStringFormatter.decimal in the regex had me confused for a second. With input there are two different values:

the value property, which is always in the en locale and latn numbering system

the displayValue state, which is in the user-specified locale and numbering system

The regex you referenced are part of the number sanitation for the value property, which why it doesn't use the locale utils. The leading zeros get trimmed during number sanitation. After the number sanitation, the value is localized for the displayValue.

The trimmed, leading zeros need to be re-added to the displayValue, so they should be in the specified numbering system. The value property doesn't need the zeros re-added.

So the steps that need to be done for this issue are:

Check for leading zeros before the number sanitation (like how we check for trailing decimals here):

calcite-design-system/packages/calcite-components/src/components/input-number/input-number.tsx

Lines 823 to 824 in b9624f9

const hasTrailingDecimalSeparator =

valueHandleInteger.charAt(valueHandleInteger.length - 1) === ".";

Add back trimmed, leading zeros after the localization (like we are adding localized trailing decimal zeros here):

calcite-design-system/packages/calcite-components/src/components/input-number/input-number.tsx

Lines 840 to 846 in b9624f9

if (origin !== "connected" && !hasTrailingDecimalSeparator) {

newLocalizedValue = addLocalizedTrailingDecimalZeros(

newLocalizedValue,

newValue,

numberStringFormatter,

);

}

Notice how the 0 is being localized into the specified numbering system in the util:

calcite-design-system/packages/calcite-components/src/utils/number.ts

Line 261 in b9624f9

return localizedValue.padEnd(localizedValue.length + trailingDecimalZeros.length, formatter.localize("0"));

The trailing, decimal zeros logic was added in #7159, I recommend taking a look that PR's implementation and discussion.

Please don't hesitate to reach out on Teams if you have any follow up questions. The input-number logic has a lot of features and edge cases, so it can be difficult to navigate at first.

github-actions · 2025-03-21T02:03:03Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

benelan

I suggested code that simplifies your implementation, which will hopefully make things easier to troubleshoot. Can you run with the suggested changes and see if you can finish it off from there?

Please reach out tomorrow if the suggestions don't unblock you, and I'll take another look. Thanks!

benelan · 2025-04-03T22:07:24Z

      valueHandleInteger.charAt(valueHandleInteger.length - 1) === ".";

+    const re = new RegExp(`^(-)?0+\\d*[${numberStringFormatter.decimal}|e]?$`);
+    const reResult = re.exec(valueHandleInteger);


The regex here is unnecessarily complex, which is likely the cause of the test failures. We just need to know the following things:

are there leading zeros, and if so, how many?

is there a minus sign?

So the lines could be simplified to something like this:

const hasLeadingMinusSign = valueHandleInteger.charAt(0) === "-"; const hasLeadingZeros = valueHandleInteger.match(/^-?(0+)\d/);

benelan · 2025-04-03T22:08:38Z

+          );
+      this.displayedValue += hasTrailingDecimalSeparator ? numberStringFormatter.decimal : "";
+    }
+


With the regex change I suggested above, lines 851-871 could be changed to something like this:

// adds localized trailing decimal separator if (hasTrailingDecimalSeparator && isValueDeleted) { newLocalizedValue = `${newLocalizedValue}${numberStringFormatter.decimal}`; } // adds localized leading zeros if (hasLeadingZeros) { newLocalizedValue = `${ hasLeadingMinusSign ? newLocalizedValue.charAt(0) : "" }${numberStringFormatter.localize("0").repeat(hasLeadingZeros[1].length)}${ hasLeadingMinusSign ? newLocalizedValue.slice(1) : newLocalizedValue }`; } this.displayedValue = newLocalizedValue;

Diff

- //adds localized trailing decimal separator - this.displayedValue = - hasTrailingDecimalSeparator && isValueDeleted - ? `${newLocalizedValue}${numberStringFormatter.decimal}` - : newLocalizedValue; - - if (reResult) { - this.displayedValue = reResult[1] - ? `-${this.displayedValue - .substring(1, this.displayedValue.length) - .padStart( - valueHandleInteger.length - 1 - (hasTrailingDecimalSeparator ? 1 : 0), - numberStringFormatter.localize("0"), - )}` - : this.displayedValue.padStart( - valueHandleInteger.length, - numberStringFormatter.localize("0"), - ); - this.displayedValue += hasTrailingDecimalSeparator ? numberStringFormatter.decimal : ""; - } + // adds localized trailing decimal separator + if (hasTrailingDecimalSeparator && isValueDeleted) { + newLocalizedValue = `${newLocalizedValue}${numberStringFormatter.decimal}`; + } + + // adds localized leading zeros + if (hasLeadingZeros) { + newLocalizedValue = `${ + hasLeadingMinusSign ? newLocalizedValue.charAt(0) : "" + }${numberStringFormatter.localize("0").repeat(hasLeadingZeros[1].length)}${ + hasLeadingMinusSign ? newLocalizedValue.slice(1) : newLocalizedValue + }`; + } + + this.displayedValue = newLocalizedValue;

We may want to use the isValueDeleted boolean for the hasLeadingZeros conditional too. Can you investigate?

josercarcamo · 2025-04-04T23:04:26Z

@benelan could you please review?

benelan

Glad my suggestions worked, thanks for testing! The e2e tests need some changes and then this will be good to go 🚀

benelan · 2025-04-05T23:39:11Z

+
+        it(`allows editing numbers that start with zeros ${locale} locale`, async () => {
+          const page = await newE2EPage();
+          await page.setContent(html`<calcite-input-number locale=${locale}></calcite-input-number>`);


FYI the attribute to change the locale is lang, not locale

benelan · 2025-04-05T23:45:18Z

+          await page.waitForChanges();
+          expect(await calciteInput.getProperty("value")).toBe("50011");
+          expect(await input.getProperty("value")).toBe("50011");
+        });


I don't think we need to test this feature for every locale.

Can you remove this test and add a new one on line 1544 that does the following:

uses the arab numbering system

uses the ar locale

uses a minus sign

uses a decimal

benelan · 2025-04-05T23:48:11Z


+  it("allows editing numbers that start with zeros and group separator", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`<calcite-input-number></calcite-input-number>`);


This test says it is using a group separator, but the attribute is missing from the component

Suggested change

await page.setContent(html`<calcite-input-number></calcite-input-number>`);

await page.setContent(html`<calcite-input-number group-separator></calcite-input-number>`);

benelan · 2025-04-08T01:23:34Z

-    expect(await calciteInput.getProperty("value")).toBe("0");
-    expect(await input.getProperty("value")).toBe("000");
+    expect(await calciteInput.getProperty("value")).toBe("7000");
+    expect(await input.getProperty("value")).toBe("7000");


Based on the modified expected value here, it looks like you are deleting the group separator instead of the 7. You will need to add another ArrowLeft keypress now that there is an additional character.

Alternatively you can do this, which doesn't depend on the length of the number:

await page.keyboard.press("Home"); await page.keyboard.press("Delete");

The other expected values below will also need to be updated to ensure they are testing the leading zero fix.

…n progress

benelan · 2025-04-10T22:55:45Z

+
+  it(`allows editing numbers that start with zeros and have decimals in the ar locale and arab numbering system`, async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`<calcite-input-number lang="ar"></calcite-input-number>`);


Suggested change

await page.setContent(html`<calcite-input-number lang="ar"></calcite-input-number>`);

await page.setContent(html`<calcite-input-number lang="ar" numbering-system="arab"></calcite-input-number>`);

You need to use the numbering-system attribute in order to change the numbering system. It doesn't change automatically when setting lang because some users want the latin numbering system and arab locale, for example.

benelan

I pushed some changes to fix the arabic test, LGTM now!

jcfranco · 2025-04-17T16:43:34Z

          <calcite-label scale="s">
-            Input Label
-            <calcite-input-number placeholder="Placeholder" scale="s" value="123" step="1"></calcite-input-number>
+            Input Label AR2


@josercarcamo for consistency, could you restore the previous HTML and either:

move this particular Arabic configuration to a new section or

omit it for now?

…1705) **Related Issue:** #9611 ## Summary Allows editing of numbers that start with zeros --------- Co-authored-by: Ben Elan <no-reply@benelan.dev>

josercarcamo and others added 2 commits March 6, 2025 11:26

fix(input-number): allow editing of numbers that start with zeros

422b5d8

Merge branch 'dev' into josercarcamo/9611-input-number-editing

b9624f9

github-actions Bot assigned josercarcamo Mar 6, 2025

github-actions Bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Mar 6, 2025

josercarcamo added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Mar 6, 2025

josercarcamo requested a review from benelan March 6, 2025 20:46

benelan suggested changes Mar 10, 2025

View reviewed changes

github-actions Bot added the Stale Issues or pull requests that have not had recent activity. label Mar 21, 2025

Preliminary changes

0bc8ab1

benelan reviewed Apr 3, 2025

View reviewed changes

Implemented suggested code change; added test cases

9934103

josercarcamo added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Apr 4, 2025

github-actions Bot removed the Stale Issues or pull requests that have not had recent activity. label Apr 5, 2025

benelan reviewed Apr 5, 2025

View reviewed changes

benelan added the skip visual snapshots Pull requests that do not need visual regression testing. label Apr 7, 2025

Fixed group-separator test

a058022

benelan reviewed Apr 8, 2025

View reviewed changes

Changed tests to support group-separator and minus sign; other test i…

eac551b

…n progress

benelan reviewed Apr 10, 2025

View reviewed changes

josercarcamo and others added 4 commits April 11, 2025 14:47

Test ar

6ca7456

test: fix leading zeros test for ar/arab

8e77286

Merge branch 'dev' into josercarcamo/9611-input-number-editing

d7beb0d

chore: cleanup and add comment to test

5f0582b

benelan approved these changes Apr 11, 2025

View reviewed changes

josercarcamo merged commit e86c99d into dev Apr 12, 2025
10 checks passed

josercarcamo deleted the josercarcamo/9611-input-number-editing branch April 12, 2025 00:15

github-actions Bot added this to the 2025-04-29 - Apr Milestone milestone Apr 12, 2025

jcfranco reviewed Apr 17, 2025

View reviewed changes

calcite-admin mentioned this pull request May 14, 2025

chore: release main #11890

Merged

	const hasTrailingDecimalSeparator =
	valueHandleInteger.charAt(valueHandleInteger.length - 1) === ".";

	if (origin !== "connected" && !hasTrailingDecimalSeparator) {
	newLocalizedValue = addLocalizedTrailingDecimalZeros(
	newLocalizedValue,
	newValue,
	numberStringFormatter,
	);
	}

	await page.setContent(html`<calcite-input-number></calcite-input-number>`);
	await page.setContent(html`<calcite-input-number group-separator></calcite-input-number>`);

Conversation

josercarcamo commented Mar 6, 2025

Summary

Uh oh!

josercarcamo commented Mar 6, 2025

Uh oh!

benelan left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

benelan Mar 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Mar 21, 2025

Uh oh!

benelan left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

benelan Apr 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

josercarcamo commented Apr 4, 2025

Uh oh!

benelan left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

benelan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

benelan Mar 11, 2025 •

edited

Loading

benelan Apr 3, 2025 •

edited

Loading