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

[EuiDatePickerRange] Applying onFocus/OnBlur handlers to inner EuiDatePicker components #6136

Merged
merged 3 commits into from
Aug 15, 2022
Merged

[EuiDatePickerRange] Applying onFocus/OnBlur handlers to inner EuiDatePicker components #6136

merged 3 commits into from
Aug 15, 2022

Conversation

anthonyhastings
Copy link
Contributor

@anthonyhastings anthonyhastings commented Aug 12, 2022

Summary

Fixes #6128 which has a detailed description of the error and how to replicate it.

  • Destructures onBlur and onFocus to ensure they're not scooped up by the rest parameter and fed to containing div element.
  • Uses lodash's over method to create handlers that will trigger callbacks for both EuiDatePicker and EuiDatePickerRange. It's worth noting that over gracefully handles array elements that aren't functions, and ignores them. This means we don't need to worry about any of the handlers not being defined.

Note: I contemplated writing these tests in Cypress as I think ultimately it's a better, more user-centric test but the entirety of the date picker suite runs using Enzyme so I've opted for consistency here.

Checklist

  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Props have proper autodocs and playground toggles
  • Added documentation
  • Checked Code Sandbox works for any docs examples
  • Added or updated jest and cypress tests
  • Checked for breaking changes and labeled appropriately
  • Checked for accessibility including keyboard-only and screenreader modes
  • Updated the Figma library counterpart
  • A changelog entry exists and is marked appropriately

@kibanamachine
Copy link

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

@cla-checker-service
Copy link

cla-checker-service bot commented Aug 12, 2022

💚 CLA has been signed

@anthonyhastings
Copy link
Contributor Author

Hey! Would love some further guidance on what else needs done to get this ready to ship. I didn't think any additional documentation was needed as this is fixing an issue rather than adding any new functionality. The explicit declaration of the onBlur and onFocus optional props are automatically picked up by the docs.

@thompsongl
Copy link
Contributor

thompsongl commented Aug 12, 2022

Hey @anthonyhastings; thanks!

Would love some further guidance on what else needs done to get this ready to ship.

No documentation is needed and the added tests cover the case. The only remaining thing would be a changelog entry indicated the new behavior.

jenkins test this

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6136/

Copy link
Member

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

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

Woohoo, this looks great. Thanks so much for the excellent contribution! 🙌 I have a Typescript suggestion and a very optional lodash suggestion, but that's it. Let us know if you have any issues generating a changelog file!

src/components/date_picker/date_picker_range.tsx Outdated Show resolved Hide resolved
src/components/date_picker/date_picker_range.tsx Outdated Show resolved Hide resolved
@@ -79,4 +79,51 @@ describe('EuiDatePickerRange', () => {

expect(component).toMatchSnapshot();
});

it('calls blur and focus handlers for date pickers while also triggering range control handlers', () => {
Copy link
Member

@cee-chen cee-chen Aug 12, 2022

Choose a reason for hiding this comment

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

Thank you for the super explicit test!! Love it! Also agreed with making this one a unit test vs. a Cypress test, I think it's straightforward enough it doesn't need an E2E test.

Copy link
Contributor Author

@anthonyhastings anthonyhastings Aug 15, 2022

Choose a reason for hiding this comment

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

Apologies, what I'd meant was that this repository currently has npm scripts that trigger cypress component testing (rather than E2E testing).

I was going to write the test as a cypress component test so it ran in isolation within a real browser, but the test would've been orphaned considering all the existing tests would've still been in enzyme. I thought it better to opt for co-location.

@anthonyhastings
Copy link
Contributor Author

Hey @thompsongl / @constancecchen; thanks for the feedback. That should be everything addressed!

@cee-chen
Copy link
Member

jenkins test this

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6136/

Copy link
Member

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

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

This looks great to me. Thank you for the fantastic community contribution @anthonyhastings! 🎉

@cee-chen cee-chen merged commit a04cab0 into elastic:main Aug 15, 2022
@anthonyhastings anthonyhastings deleted the date-picker-range-focus-blur-fix branch August 15, 2022 20:56
@anthonyhastings
Copy link
Contributor Author

anthonyhastings commented Aug 15, 2022

You're very welcome; happy to help! Do you know what version this will be bundled with?

@thompsongl
Copy link
Contributor

@anthonyhastings Looks like v64.0.0

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.

EuiFormRow and EuiDatePickerRange focus behaviour
4 participants