Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix three issues with the lab DatePicker component #2301

Merged
merged 6 commits into from
Jun 15, 2022
Merged

Fix three issues with the lab DatePicker component #2301

merged 6 commits into from
Jun 15, 2022

Conversation

sebastianvitterso
Copy link
Contributor

@sebastianvitterso sebastianvitterso commented Jun 13, 2022

This PR solves/addresses three issues found in the DatePicker component in eds-lab-react.

  1. It is currently not possible to close the pop-over of the DatePicker by shift-tabbing away. (See issue on package.) Focus is moved away from the input field, but the pop-over stays. In forms with multiple DatePickers in a row, this might lead to multiple DatePickers being open at the same time. Fixed by using a ref to the 3rd-party-component, and running its setOpen(false)-function. Commit: ccacbf2
  2. It is currently not possible to update the component's value from the outside of the component, as the component's value is currently initialized from the prop's value, then the prop is never read from again. Fixes DatePicker value cannot be updated from code #2136. This PR addresses this by adding a useEffect which updates the internal value whenever the external value is updated. Commit: c70a44d.
  3. The color of the label and the calendar icon were too dark, compared to how they are designed in EDS - Date/time picker. This is now updated, and passed directly to the component instead of unnecessarily overriding CSS (for the icon). Commits: 7f38785, 661ef2f, 2992a3d.

to allow for dynamic updating/resetting of the internal value,
using the prop value.
and add a SHIFT+TAB-handler to close the pop-over
when keyboard-navigating away from the input field.
... to match EDS spec.
Copy link
Contributor

@mimarz mimarz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesomesauce! 👏

We haven't looked much at the Datepicker code in a long time as its been a community contribution, but from what I can see it looks mostly good :)

We use Github keywords for linking to issues that are fixed/resolved, so could you update the description with the other issue you also fixed?

@sebastianvitterso
Copy link
Contributor Author

I believe I've done so now.

Copy link
Contributor

@mimarz mimarz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

Thanks for your contribution!

@mimarz mimarz mentioned this pull request Jun 15, 2022
@mimarz mimarz merged commit 56b87ed into equinor:develop Jun 15, 2022
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.

DatePicker value cannot be updated from code
2 participants