OPHJOD-861: Update ark UI to version 4.12.0 and implement required changes #171
Conversation
| @@ -83,13 +98,6 @@ export const Datepicker = React.forwardRef<HTMLInputElement, DatepickerProps>(fu | |||
| name={name} | |||
| placeholder={placeholder} | |||
| className="ds-w-full ds-rounded-l ds-border-y ds-border-l ds-border-border-gray ds-bg-white ds-p-5 ds-font-arial ds-text-black ds-outline-none placeholder:ds-text-inactive-gray" | |||
| onInput={(e: React.ChangeEvent<HTMLInputElement>) => { | |||
There was a problem hiding this comment.
Here is the redundant onInput handler. It didn't seem to do much except cause trouble.
|
| import { Slider } from './Slider'; | ||
|
|
||
| const { ResizeObserver } = window; |
There was a problem hiding this comment.
ResizeObserver is globally stubbed in vitest.setup.ts so no need to mock it here.
|
|
||
| await press('right'); | ||
| expect(onValueChangeMock).toHaveBeenCalledWith(25); | ||
| await press('right'); // For some reason, the "aria-valuenow" attribute is not updated without extra right press |
There was a problem hiding this comment.
This part drove me nuts. Even though the onValueChange is called with the right value, the aria-valuenow attribute would not update without double press here, no matter what I tried. When testing with storybook, the keyboard controls work fine, so I think the issue is within the test environment. Just in case, I tested all the available values.
Things I tried that failed:
- Adding delays here and there
- Using
acteverywhere - Using
fireEventinstead ofuserEvent - Updating ARK UI to
3.12.0instead of4.12.0(see: [Snyk] Upgrade @ark-ui/react from 3.0.0-1 to 3.12.0 #156) - Updating
@testing-library/*packages
| return ( | ||
| <ArkDatePicker.Root | ||
| onValueChange={(details) => { | ||
| onChange({ | ||
| target: { name, value: details.valueAsString[0] ?? '' }, | ||
| } as React.ChangeEvent<HTMLInputElement>); | ||
| }} | ||
| value={value ? [value] : []} | ||
| value={value ? [parseDate(value)] : undefined} |
There was a problem hiding this comment.
Value cannot be a string like it used to, so parseDate from ARK UI is used.
Description
onInputlistener in text input that messed up the valueparseDatefrom ARK UI to set the internal value in correct format as it was changeddivelements instead ofbutton. Used asChild to make them buttons again so that they can be disabledactRelated JIRA ticket
https://jira.eduuni.fi/browse/OPHJOD-861