From ab16f9e54b136790591ac0091732472fbdb5ece5 Mon Sep 17 00:00:00 2001 From: Shaneeza Date: Mon, 18 Dec 2023 17:32:52 -0500 Subject: [PATCH] Date Picker [LG-3897] backspace (#2143) * add tests * move test --- .../src/DatePicker/DatePicker.spec.tsx | 94 ++++++++++++++----- .../DatePickerInput/DatePickerInput.tsx | 9 +- 2 files changed, 73 insertions(+), 30 deletions(-) diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx index b60b7a66b0..57f9a24f4c 100644 --- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx +++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx @@ -1250,6 +1250,26 @@ describe('packages/date-picker', () => { */ describe('Arrow key', () => { describe('Input', () => { + describe('Left Arrow', () => { + test('moves the cursor when the value starts with 0', () => { + const { monthInput } = renderDatePicker({}); + userEvent.type(monthInput, '04{arrowleft}{arrowleft}'); + expect(monthInput).toHaveFocus(); + }); + + test('moves the cursor when the value is 0', () => { + const { monthInput } = renderDatePicker({}); + userEvent.type(monthInput, '0{arrowleft}'); + expect(monthInput).toHaveFocus(); + }); + + test('moves the cursor to the next segment when the value is 0', () => { + const { yearInput, monthInput } = renderDatePicker({}); + userEvent.type(monthInput, '0{arrowleft}{arrowleft}'); + expect(yearInput).toHaveFocus(); + }); + }); + test('right arrow moves focus through segments', () => { const { yearInput, monthInput, dayInput } = renderDatePicker(); userEvent.click(yearInput); @@ -2122,37 +2142,59 @@ describe('packages/date-picker', () => { }); describe('updating a segment', () => { - test('clearing the segment updates the input', () => { - const { yearInput, monthInput, dayInput } = renderDatePicker({}); - userEvent.type(yearInput, '2020'); - userEvent.type(monthInput, '7'); - userEvent.type(dayInput, '4'); + describe('backspace', () => { + test('clearing the segment updates the input', () => { + const { yearInput, monthInput, dayInput } = renderDatePicker({}); + userEvent.type(yearInput, '2020'); + userEvent.type(monthInput, '7'); + userEvent.type(dayInput, '4'); - yearInput.setSelectionRange(0, 4); - userEvent.type(yearInput, '{backspace}'); - expect(yearInput).toHaveValue(''); - }); + yearInput.setSelectionRange(0, 4); + userEvent.type(yearInput, '{backspace}'); + expect(yearInput).toHaveValue(''); + }); - test('clearing and typing a new value does not format the input', () => { - const { yearInput, monthInput, dayInput } = renderDatePicker({}); - userEvent.type(yearInput, '2020'); - userEvent.type(monthInput, '7'); - userEvent.type(dayInput, '4'); + test('keeps the focus inside the segment if it is not empty', () => { + const { monthInput } = renderDatePicker({}); - yearInput.setSelectionRange(0, 4); - userEvent.type(yearInput, '{backspace}'); - userEvent.type(yearInput, '2'); - expect(yearInput).toHaveValue('2'); - }); + userEvent.type(monthInput, '0'); + userEvent.type(monthInput, '{backspace}'); - test('deleting characters does not format the segment', () => { - const { yearInput, monthInput, dayInput } = renderDatePicker({}); - userEvent.type(yearInput, '2020'); - userEvent.type(monthInput, '7'); - userEvent.type(dayInput, '4'); + expect(monthInput).toHaveValue(''); + expect(monthInput).toHaveFocus(); + }); + + test('moves the focus to the next segment', () => { + const { yearInput, monthInput } = renderDatePicker({}); + + userEvent.type(monthInput, '0'); + userEvent.type(monthInput, '{backspace}{backspace}'); + + expect(monthInput).toHaveValue(''); + expect(yearInput).toHaveFocus(); + }); - userEvent.type(yearInput, '{backspace}{backspace}'); - expect(yearInput).toHaveValue('20'); + test('clearing and typing a new value does not format the input', () => { + const { yearInput, monthInput, dayInput } = renderDatePicker({}); + userEvent.type(yearInput, '2020'); + userEvent.type(monthInput, '7'); + userEvent.type(dayInput, '4'); + + yearInput.setSelectionRange(0, 4); + userEvent.type(yearInput, '{backspace}'); + userEvent.type(yearInput, '2'); + expect(yearInput).toHaveValue('2'); + }); + + test('deleting characters does not format the segment', () => { + const { yearInput, monthInput, dayInput } = renderDatePicker({}); + userEvent.type(yearInput, '2020'); + userEvent.type(monthInput, '7'); + userEvent.type(dayInput, '4'); + + userEvent.type(yearInput, '{backspace}{backspace}'); + expect(yearInput).toHaveValue('20'); + }); }); describe('typing new characters', () => { diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx index c676f3f3e9..b0bb090d07 100644 --- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx +++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx @@ -7,7 +7,6 @@ import React, { } from 'react'; import { isSameUTCDay } from '@leafygreen-ui/date-utils'; -import { isZeroLike } from '@leafygreen-ui/lib'; import { createSyntheticEvent, keyMap } from '@leafygreen-ui/lib'; import { DateFormField, DateInputBox } from '../../shared/components/DateInput'; @@ -88,7 +87,7 @@ export const DatePickerInput = forwardRef( // if target is not a segment, do nothing if (!isSegment) return; - const isSegmentEmpty = isZeroLike(target.value); + const isSegmentEmpty = !target.value; const { selectionStart, selectionEnd } = target; @@ -97,7 +96,7 @@ export const DatePickerInput = forwardRef( // if input is empty, // or the cursor is at the beginning of the input // set focus to prev. input (if it exists) - if (isSegmentEmpty || selectionStart === 0) { + if (selectionStart === 0) { const segmentToFocus = getRelativeSegmentRef('prev', { segment: target, formatParts, @@ -115,7 +114,7 @@ export const DatePickerInput = forwardRef( // if input is empty, // or the cursor is at the end of the input // set focus to next. input (if it exists) - if (isSegmentEmpty || selectionEnd === target.value.length) { + if (selectionEnd === target.value.length) { const segmentToFocus = getRelativeSegmentRef('next', { segment: target, formatParts, @@ -137,6 +136,8 @@ export const DatePickerInput = forwardRef( case keyMap.Backspace: { if (isSegmentEmpty) { + // prevent the backspace in the previous segment + e.preventDefault(); const segmentToFocus = getRelativeSegmentRef('prev', { segment: target, formatParts,