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

Components: Stop using react-click-outside as a dependency #16878

Merged
merged 1 commit into from
Aug 8, 2019

Conversation

gziolo
Copy link
Member

@gziolo gziolo commented Aug 2, 2019

Description

Follow-up for #14851.

This PR addresses my comment from one of the PRs merged this week:

Unrelated question to this PR. Can we also refactor Modal component to stop using react-click-outside?

This allows us to get rid of react-click-outside dependency from the repository in favor of our own HOC withFocusOutside.

How has this been tested?

Open one of the modals from More Menu:

  • Block Manager
  • Keyboard Shortcuts
  • Options

Make sure it closes when you mouse-click outside of the modal.

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.

@gziolo gziolo added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Feature] UI Components Impacts or related to the UI component system [Type] Code Quality Issues or PRs that relate to code quality [Package] Components /packages/components labels Aug 2, 2019
@gziolo gziolo requested a review from abotteram August 2, 2019 09:58
@gziolo gziolo self-assigned this Aug 2, 2019
@gziolo gziolo requested a review from noisysocks August 2, 2019 09:59
@gziolo
Copy link
Member Author

gziolo commented Aug 2, 2019

By the way, when testing I discovered UI regression in Options modal:

Screen Shot 2019-08-02 at 12 01 10

/cc @mapk

Edit: I see it's tracked in #16860 👍

Copy link
Member

@jorgefilipecosta jorgefilipecosta left a comment

Choose a reason for hiding this comment

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

Works well in my tests 👍

@gziolo gziolo merged commit 8a052be into master Aug 8, 2019
@gziolo gziolo deleted the remove/react-click-outside-dep branch August 8, 2019 09:46
@gziolo gziolo added this to the Gutenberg 6.3 milestone Aug 8, 2019
@noisysocks
Copy link
Member

Thanks for doing this @gziolo! ❤️

getdave added a commit that referenced this pull request Aug 15, 2019
… focus

Previously there was no check to see whether the blur event occured within the wrapped component. If it occurs within then we do not want to trigger the `handleFocusOutside` callback because (by definition) the focus has not moved outside the wrapped element.

This may have been a regression introduced in #16878
getdave added a commit that referenced this pull request Aug 20, 2019
… `withFocusOutside` HOC (#17051)

* Adds check to determine whether event occured within element trapping focus

Previously there was no check to see whether the blur event occured within the wrapped component. If it occurs within then we do not want to trigger the `handleFocusOutside` callback because (by definition) the focus has not moved outside the wrapped element.

This may have been a regression introduced in #16878

* Fix handling blur event when document is not actually focused

Previously we fixed the wrong problem. The actual issue is that previously we were handling document blur events as true “focus outside” events when in fact they should be ignored as if the document is not focused then presumably the user did not intent the blur.

* Update to test for document loss of focus scenario
donmhico pushed a commit to donmhico/gutenberg that referenced this pull request Aug 27, 2019
… `withFocusOutside` HOC (WordPress#17051)

* Adds check to determine whether event occured within element trapping focus

Previously there was no check to see whether the blur event occured within the wrapped component. If it occurs within then we do not want to trigger the `handleFocusOutside` callback because (by definition) the focus has not moved outside the wrapped element.

This may have been a regression introduced in WordPress#16878

* Fix handling blur event when document is not actually focused

Previously we fixed the wrong problem. The actual issue is that previously we were handling document blur events as true “focus outside” events when in fact they should be ignored as if the document is not focused then presumably the user did not intent the blur.

* Update to test for document loss of focus scenario
gziolo pushed a commit that referenced this pull request Aug 29, 2019
… `withFocusOutside` HOC (#17051)

* Adds check to determine whether event occured within element trapping focus

Previously there was no check to see whether the blur event occured within the wrapped component. If it occurs within then we do not want to trigger the `handleFocusOutside` callback because (by definition) the focus has not moved outside the wrapped element.

This may have been a regression introduced in #16878

* Fix handling blur event when document is not actually focused

Previously we fixed the wrong problem. The actual issue is that previously we were handling document blur events as true “focus outside” events when in fact they should be ignored as if the document is not focused then presumably the user did not intent the blur.

* Update to test for document loss of focus scenario
gziolo pushed a commit that referenced this pull request Aug 29, 2019
… `withFocusOutside` HOC (#17051)

* Adds check to determine whether event occured within element trapping focus

Previously there was no check to see whether the blur event occured within the wrapped component. If it occurs within then we do not want to trigger the `handleFocusOutside` callback because (by definition) the focus has not moved outside the wrapped element.

This may have been a regression introduced in #16878

* Fix handling blur event when document is not actually focused

Previously we fixed the wrong problem. The actual issue is that previously we were handling document blur events as true “focus outside” events when in fact they should be ignored as if the document is not focused then presumably the user did not intent the blur.

* Update to test for document loss of focus scenario
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] UI Components Impacts or related to the UI component system [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants