MPDX-8563: Allow anniversary delete and input on enter #1424

zweatshirt · 2025-08-27T14:49:42Z

Description

Jira ticket
Issue:

People could already technically delete anniversary values, they were just unable to do it by pressing enter.
- This is true of any other date fields that would exist in the Contact Details modal (namely, the Birthday field).
People were also unable to save a valid date by pressing enter.
Both behaviors, being unable to save data on enter and being unable to clear data on enter, is inconsistent with other fields in the form.

Proposed solution:

Add a custom onKeyDown handler.

Other issues/thoughts:

There seems to be an issue with how DesktopDateField handles onBlur. This is consistent across pages and modals.
Since the handler is used twice, it can become a shared function, but since it is only used in two places I didn't go that route.

Checklist:

I have given my PR a title with the format "MPDX-(JIRA#) (summary sentence max 80 chars)"
I have applied the appropriate labels. (Add the label "On Staging" to get the branch automatically merged into staging.)
I have requested a review from another person on the project

github-actions · 2025-08-27T14:53:33Z

Bundle sizes [mpdx-react]

Compared against 9aa4279

No significant changes found

Copilot

Pull Request Overview

This PR adds keyboard support for anniversary and birthday date fields, allowing users to save or clear dates by pressing Enter. This improves form consistency as other fields already support Enter key interactions.

Key changes:

Added handleOnDateEnter function to process Enter key events on date inputs
Enhanced date fields to handle both saving valid dates and clearing empty inputs on Enter
Added comprehensive test coverage for the new keyboard functionality

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
PersonShowMore.tsx	Added Enter key handler for anniversary date field
PersonShowMore.test.tsx	Added comprehensive test suite for anniversary date field interactions
PersonBirthday.tsx	Added Enter key handler for birthday date field
PersonBirthday.test.tsx	Added comprehensive test suite for birthday date field interactions

Copilot · 2025-08-28T13:50:59Z

.../ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonShowMore/PersonShowMore.tsx

+  const handleOnDateEnter = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      const inputValue = (event.target as HTMLInputElement).value.trim();
+      if (!inputValue) {
+        handleDateChange(null);
+      } else {
+        const parsed = DateTime.fromFormat(inputValue, 'M/d/yyyy');
+        if (parsed.isValid) {
+          handleDateChange(parsed);
+        }
+      }
+    }
+  };


This function is duplicated in both PersonShowMore and PersonBirthday components. Consider extracting it to a shared utility function to follow DRY principles and improve maintainability.

Copilot · 2025-08-28T13:50:59Z

.../ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonBirthday/PersonBirthday.tsx

+  const handleOnDateEnter = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      const inputValue = (event.target as HTMLInputElement).value.trim();
+      if (!inputValue) {
+        handleDateChange(null);
+      } else {
+        const parsed = DateTime.fromFormat(inputValue, 'M/d/yyyy');
+        if (parsed.isValid) {
+          handleDateChange(parsed);
+        }
+      }
+    }
+  };


This function is duplicated in both PersonShowMore and PersonBirthday components. Consider extracting it to a shared utility function to follow DRY principles and improve maintainability.

I'll probably do this.

canac · 2025-08-28T16:30:28Z

@zweatshirt Thanks so much for improving this! The way it worked before is definitely a bad user experience.

I have an idea for how to fix this at the source. The root cause seems to be that DesktopDateField.tsx only calls onChange in onBlur. I'd like for us to update onChange in DesktopDateField to try to parse the date that the user is starting to type. If It's an invalid date, do nothing because they probably haven't finished typing (e.g. "1/1/"). But if the input is empty or the date is a valid date, go ahead and call onChange. That way if they hit enter without tabbing away from the field, the form will have the date they just typed and be able to type it. Does that make sense?

I'm not saying you need to change it now, but DesktopTimeField has the same issue.

zweatshirt · 2025-08-28T17:27:02Z

@zweatshirt Thanks so much for improving this! The way it worked before is definitely a bad user experience.

I have an idea for how to fix this at the source. The root cause seems to be that DesktopDateField.tsx only calls onChange in onBlur. I'd like for us to update onChange in DesktopDateField to try to parse the date that the user is starting to type. If It's an invalid date, do nothing because they probably haven't finished typing (e.g. "1/1/"). But if the input is empty or the date is a valid date, go ahead and call onChange. That way if they hit enter without tabbing away from the field, the form will have the date they just typed and be able to type it. Does that make sense?

I'm not saying you need to change it now, but DesktopTimeField has the same issue.

Thanks for the detailed response Caleb. I noticed the issue in DesktopDateField but tried to keep the PR in the scope of this Contact Details modal. I'll work on making that change now.

canac · 2025-08-28T17:31:56Z

@zweatshirt Thanks for trying to keep the scope small! We definitely don't want to do more work than we need to. In this case though, I think it is worth solving the root issue. Then your fix will benefit any modal that has date picker inputs.

Add keydown handling for Enter key in CustomDateField component.

65f6b44

zweatshirt changed the title ~~MPDX-8563: Allow anniversary delete (and input) on enter~~ MPDX-8563: Allow anniversary delete and input on enter Aug 27, 2025

zweatshirt added 2 commits August 27, 2025 10:24

Run prettier on PersonBirthday.tsx and PersonShowMore.tsx

7a1b3ca

Add tests to increase patch coverage

489fad2

zweatshirt force-pushed the MPDX-8563-delete-anniversary branch from 0e9c084 to 489fad2 Compare August 28, 2025 13:32

zweatshirt marked this pull request as ready for review August 28, 2025 13:50

zweatshirt requested review from dr-bizz and Copilot August 28, 2025 13:50

Copilot AI reviewed Aug 28, 2025

View reviewed changes

dr-bizz requested review from canac and removed request for dr-bizz August 28, 2025 15:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

MPDX-8563: Allow anniversary delete and input on enter #1424

MPDX-8563: Allow anniversary delete and input on enter #1424

zweatshirt commented Aug 27, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 27, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Aug 28, 2025

Uh oh!

Copilot AI Aug 28, 2025

Uh oh!

zweatshirt Aug 28, 2025

Uh oh!

canac commented Aug 28, 2025

Uh oh!

zweatshirt commented Aug 28, 2025

Uh oh!

canac commented Aug 28, 2025

Uh oh!

Uh oh!

MPDX-8563: Allow anniversary delete and input on enter #1424

Are you sure you want to change the base?

MPDX-8563: Allow anniversary delete and input on enter #1424

Conversation

zweatshirt commented Aug 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist:

Uh oh!

github-actions bot commented Aug 27, 2025

Bundle sizes [mpdx-react]

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 28, 2025

Choose a reason for hiding this comment

Uh oh!

zweatshirt Aug 28, 2025

Choose a reason for hiding this comment

Uh oh!

canac commented Aug 28, 2025

Uh oh!

zweatshirt commented Aug 28, 2025

Uh oh!

canac commented Aug 28, 2025

Uh oh!

Uh oh!

zweatshirt commented Aug 27, 2025 •

edited

Loading