Skip to content

🐛 Fix: Change Dates Using Keyboard and DatePicker#287

Merged
tyler-dane merged 13 commits intomainfrom
fix/232-datepicker-keyboard
Mar 6, 2025
Merged

🐛 Fix: Change Dates Using Keyboard and DatePicker#287
tyler-dane merged 13 commits intomainfrom
fix/232-datepicker-keyboard

Conversation

@tyler-dane
Copy link
Contributor

@tyler-dane tyler-dane commented Mar 2, 2025

Closes #232

a11ydemo.mov

This pull request includes several changes to the packages/web directory, focusing on refactoring date and time utilities, updating components, and improving the event form's date handling. The most important changes include renaming and refactoring utility functions, updating the DatePicker component, and enhancing the event form's date handling logic.

Refactoring date and time utilities:

  • Renamed date.util to datetime.util and moved relevant functions (shouldAdjustComplimentDate, shouldAdjustComplimentTime) to web.datetime.util.ts to better organize date and time utilities. [1] [2]

Updating components:

  • Replaced Input with StyledInput in the DatePicker component and added a default value for bgColor. [1] [2] [3] [4]
  • Removed unused imports and exports in DatePicker and Input component files. [1] [2]

Enhancing event form's date handling:

  • Updated the DatePickers component to handle date adjustments more effectively, ensuring the end date is correctly set when the start date changes and vice versa. [1] [2] [3]
  • Added displayEndDate and onSetEventField props to DatePickers to manage the display and backend date formats properly. [1] [2]

Minor changes:

  • Removed focus-trap-react from package.json dependencies.
  • Updated type constraints in Focusable component to improve type safety. [1] [2]

Focus Trap was preventing the date picker's keyboard events from being
captured.
Removed unnecessary dependencies related to focus-trap, eslint-plugin-import, and other unused packages to clean up project dependencies.
- Remove index files for DatePicker and Input components
- Update import paths for DatePicker and Input
- Modify Focusable component to use setIsFocused instead of toggleFocused
- Adjust DatePicker input to use StyledInput
When changing a date and then changing another form field (like title), the date change was being lost. This makes sure that everytime the date is changed, the draft is updated.
Tracking these separately makes it possible to display user-friendly
dates, while also letting the date picker and backend use
backend-friendly dates, which save an all-day event like so:
start: 2025-03-03, end 2025-03-04
remove unnecessary adjustComplimentDateIfNeeded, preferring to do this logic on the onSelect handlers
@tyler-dane tyler-dane changed the title 🐛 Fix: DatePicker a11y 🐛 Fix: Change Dates Using Keyboard and DatePicker Mar 6, 2025
Modify event form field update logic to use a more concise and consistent approach:
- Simplify onSetEventField to accept a partial event object
- Update type definitions to match new implementation
- Adjust event field updates across multiple components to use new method
@tyler-dane tyler-dane marked this pull request as ready for review March 6, 2025 01:57
@tyler-dane tyler-dane merged commit d9073f7 into main Mar 6, 2025
3 checks passed
@tyler-dane tyler-dane deleted the fix/232-datepicker-keyboard branch March 6, 2025 02:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Cannot use select date from datepicker using keyboard

1 participant