Skip to content

Commit 0173413

Browse files
LFDanLuLFDanLu
authored
Revert "fix: ignore typing leading zeros in DateField segments (#8447)" (#8684)
This reverts commit 7e14ffa.
1 parent 2d44556 commit 0173413

File tree

4 files changed

+10
-60
lines changed

4 files changed

+10
-60
lines changed

‎packages/@react-aria/datepicker/src/useDateSegment.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -256,8 +256,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
256256
if (shouldSetValue) {
257257
focusManager.focusNext();
258258
}
259-
} else if (shouldSetValue) {
260-
// Don't accept leading zeros except for fields that accept 0 as a entire value (aka 00 for minutes/seconds/etc)
259+
} else {
261260
enteredKeys.current = newValue;
262261
}
263262
break;
@@ -326,6 +325,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
326325
if (ref.current) {
327326
ref.current.textContent = compositionRef.current;
328327
}
328+
329329
// Android sometimes fires key presses of letters as composition events. Need to handle am/pm keys here too.
330330
// Can also happen e.g. with Pinyin keyboard on iOS.
331331
if (data != null && (startsWith(am, data) || startsWith(pm, data))) {
@@ -387,9 +387,9 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
387387

388388
let segmentStyle: CSSProperties = {caretColor: 'transparent'};
389389
if (direction === 'rtl') {
390-
// While the bidirectional algorithm seems to work properly on inline elements with actual values, it returns different results for placeholder strings.
390+
// While the bidirectional algorithm seems to work properly on inline elements with actual values, it returns different results for placeholder strings.
391391
// To ensure placeholder render in correct format, we apply the CSS equivalent of LRE (left-to-right embedding). See https://www.unicode.org/reports/tr9/#Explicit_Directional_Embeddings.
392-
// However, we apply this to both placeholders and date segments with an actual value because the date segments will shift around when deleting otherwise.
392+
// However, we apply this to both placeholders and date segments with an actual value because the date segments will shift around when deleting otherwise.
393393
segmentStyle.unicodeBidi = 'embed';
394394
let format = options[segment.type];
395395
if (format === 'numeric' || format === '2-digit') {

‎packages/@react-spectrum/datepicker/test/DateField.test.js

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -235,11 +235,7 @@ describe('DateField', function () {
235235
errorMessage="Date unavailable." />
236236
);
237237
await user.tab();
238-
await user.keyboard('1');
239-
await user.keyboard('[ArrowRight]');
240-
await user.keyboard('1');
241-
await user.keyboard('[ArrowRight]');
242-
await user.keyboard('1980');
238+
await user.keyboard('01011980');
243239
expect(tree.getByText('Date unavailable.')).toBeInTheDocument();
244240
});
245241

@@ -249,7 +245,7 @@ describe('DateField', function () {
249245
<DateField label="Date" showFormatHelpText />
250246
</Provider>
251247
);
252-
248+
253249
let segments = Array.from(getByRole('group').querySelectorAll('[data-testid]'));
254250
let segmentTypes = segments.map(s => s.getAttribute('data-testid'));
255251
expect(segmentTypes).toEqual(['year', 'month', 'day']);

‎packages/@react-spectrum/datepicker/test/DatePicker.test.js

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1426,8 +1426,7 @@ describe('DatePicker', function () {
14261426

14271427
it('should support typing into the month segment', function () {
14281428
testInput('month,', new CalendarDate(2019, 2, 3), '1', new CalendarDate(2019, 1, 3), false);
1429-
testInput('month,', new CalendarDate(2019, 2, 3), '01', new CalendarDate(2019, 1, 3), false);
1430-
testInput('month,', new CalendarDate(2019, 2, 3), '012', new CalendarDate(2019, 12, 3), true);
1429+
testInput('month,', new CalendarDate(2019, 2, 3), '01', new CalendarDate(2019, 1, 3), true);
14311430
testInput('month,', new CalendarDate(2019, 2, 3), '12', new CalendarDate(2019, 12, 3), true);
14321431
testInput('month,', new CalendarDate(2019, 2, 3), '4', new CalendarDate(2019, 4, 3), true);
14331432
testIgnored('month,', new CalendarDate(2019, 2, 3), '0');
@@ -1436,8 +1435,7 @@ describe('DatePicker', function () {
14361435

14371436
it('should support typing into the day segment', function () {
14381437
testInput('day,', new CalendarDate(2019, 2, 3), '1', new CalendarDate(2019, 2, 1), false);
1439-
testInput('day,', new CalendarDate(2019, 2, 3), '01', new CalendarDate(2019, 2, 1), false);
1440-
testInput('day,', new CalendarDate(2019, 2, 3), '012', new CalendarDate(2019, 2, 12), true);
1438+
testInput('day,', new CalendarDate(2019, 2, 3), '01', new CalendarDate(2019, 2, 1), true);
14411439
testInput('day,', new CalendarDate(2019, 2, 3), '12', new CalendarDate(2019, 2, 12), true);
14421440
testInput('day,', new CalendarDate(2019, 2, 3), '4', new CalendarDate(2019, 2, 4), true);
14431441
testIgnored('day,', new CalendarDate(2019, 2, 3), '0');
@@ -1446,28 +1444,22 @@ describe('DatePicker', function () {
14461444

14471445
it('should support typing into the year segment', function () {
14481446
testInput('year,', new CalendarDate(2019, 2, 3), '1993', new CalendarDate(1993, 2, 3), false);
1449-
testInput('year,', new CalendarDate(2019, 2, 3), '0199', new CalendarDate(199, 2, 3), false);
1450-
testInput('year,', new CalendarDate(2019, 2, 3), '01993', new CalendarDate(1993, 2, 3), false);
1451-
testInput('year,', new CalendarDateTime(2019, 2, 3, 8), '0199', new CalendarDateTime(199, 2, 3, 8), false);
14521447
testInput('year,', new CalendarDateTime(2019, 2, 3, 8), '1993', new CalendarDateTime(1993, 2, 3, 8), true);
1453-
testInput('year,', new CalendarDateTime(2019, 2, 3, 8), '01993', new CalendarDateTime(1993, 2, 3, 8), true);
14541448
testIgnored('year,', new CalendarDate(2019, 2, 3), '0');
14551449
});
14561450

14571451
it('should support typing into the hour segment in 12 hour time', function () {
14581452
// AM
14591453
testInput('hour,', new CalendarDateTime(2019, 2, 3, 8), '1', new CalendarDateTime(2019, 2, 3, 1), false);
1460-
testInput('hour,', new CalendarDateTime(2019, 2, 3, 8), '01', new CalendarDateTime(2019, 2, 3, 1), false);
1461-
testInput('hour,', new CalendarDateTime(2019, 2, 3, 8), '011', new CalendarDateTime(2019, 2, 3, 11), true);
1454+
testInput('hour,', new CalendarDateTime(2019, 2, 3, 8), '01', new CalendarDateTime(2019, 2, 3, 1), true);
14621455
testInput('hour,', new CalendarDateTime(2019, 2, 3, 8), '11', new CalendarDateTime(2019, 2, 3, 11), true);
14631456
testInput('hour,', new CalendarDateTime(2019, 2, 3, 8), '12', new CalendarDateTime(2019, 2, 3, 0), true);
14641457
testInput('hour,', new CalendarDateTime(2019, 2, 3, 8), '4', new CalendarDateTime(2019, 2, 3, 4), true);
14651458
testIgnored('hour,', new CalendarDateTime(2019, 2, 3, 8), '0');
14661459

14671460
// PM
14681461
testInput('hour,', new CalendarDateTime(2019, 2, 3, 20), '1', new CalendarDateTime(2019, 2, 3, 13), false);
1469-
testInput('hour,', new CalendarDateTime(2019, 2, 3, 20), '01', new CalendarDateTime(2019, 2, 3, 13), false);
1470-
testInput('hour,', new CalendarDateTime(2019, 2, 3, 20), '011', new CalendarDateTime(2019, 2, 3, 23), true);
1462+
testInput('hour,', new CalendarDateTime(2019, 2, 3, 20), '01', new CalendarDateTime(2019, 2, 3, 13), true);
14711463
testInput('hour,', new CalendarDateTime(2019, 2, 3, 20), '11', new CalendarDateTime(2019, 2, 3, 23), true);
14721464
testInput('hour,', new CalendarDateTime(2019, 2, 3, 20), '12', new CalendarDateTime(2019, 2, 3, 12), true);
14731465
testInput('hour,', new CalendarDateTime(2019, 2, 3, 20), '4', new CalendarDateTime(2019, 2, 3, 16), true);

‎packages/react-aria-components/test/DateField.test.js

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -374,44 +374,6 @@ describe('DateField', () => {
374374
expect(segmentTypes).toEqual(['year', 'literal', 'month', 'day']);
375375
});
376376

377-
it('should not store leading zeros when typing into the segments', async () => {
378-
let {getAllByRole} = render(
379-
<DateField>
380-
<Label>Date</Label>
381-
<DateInput>
382-
{segment => <DateSegment segment={segment} />}
383-
</DateInput>
384-
</DateField>
385-
);
386-
387-
let segements = getAllByRole('spinbutton');
388-
let monthSegment = segements[0];
389-
await user.click(monthSegment);
390-
expect(monthSegment).toHaveFocus();
391-
await user.keyboard('11');
392-
expect(monthSegment).toHaveTextContent('11');
393-
await user.click(monthSegment);
394-
await user.keyboard('012');
395-
expect(monthSegment).toHaveTextContent('12');
396-
397-
let daysSegment = segements[1];
398-
await user.click(daysSegment);
399-
expect(daysSegment).toHaveFocus();
400-
await user.keyboard('11');
401-
expect(daysSegment).toHaveTextContent('11');
402-
await user.click(daysSegment);
403-
await user.keyboard('012');
404-
expect(daysSegment).toHaveTextContent('12');
405-
406-
let yearsSegment = segements[2];
407-
await user.click(yearsSegment);
408-
expect(yearsSegment).toHaveFocus();
409-
await user.keyboard('1111');
410-
expect(yearsSegment).toHaveTextContent('1111');
411-
await user.keyboard('002222');
412-
expect(yearsSegment).toHaveTextContent('2222');
413-
});
414-
415377
it('should support autofill', async() => {
416378
let {getByRole} = render(
417379
<DateField>

0 commit comments

Comments
 (0)