-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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: changing month or day in post publish date closes the popover. #17201
Fix: changing month or day in post publish date closes the popover. #17201
Conversation
packages/components/src/higher-order/with-focus-outside/index.js
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When I test this PR I notice that you can no longer dismiss the date picker by clicking anywhere on the Document sidebar. There are similar problems with the inserter and the More menus.
I don't think that this fixes the root cause of the issue which is that there's a focus loss when the Next month button is clicked. It's the loss of focus which is causing withFocusOutside
to (correctly) close the menu.
You can see what I mean by:
- Open DevTools.
- Open the schedule date picker.
- Click the Next month button.
- In DevTools, run:
document.activeElement
document.activeElement
should be the Next month button, but it is not.
2c4fc83
to
9ed00a8
Compare
Thank you for the reviews @noisysocks, @epiqueras. It seems the previous fix was invalid. And I was not able to find a "correct" fix. Probably we should debug the problem upstream on react dates and add a commit there that avoids the focus lose. But until then I commit a fix that essentially guarantees that when we click next/prev month, the focus is kept on the date picker focusable region. |
Updated the fix used.
Co-Authored-By: Enrique Piqueras <[email protected]>
Co-Authored-By: Enrique Piqueras <[email protected]>
Cool hack! Thanks @jorgefilipecosta! 👍 |
* Fix: changing month or day in post publish date closes the popover. * Update packages/components/src/date-time/date.js Co-Authored-By: Enrique Piqueras <[email protected]> * Update packages/components/src/date-time/date.js Co-Authored-By: Enrique Piqueras <[email protected]>
* Fix: changing month or day in post publish date closes the popover. * Update packages/components/src/date-time/date.js Co-Authored-By: Enrique Piqueras <[email protected]> * Update packages/components/src/date-time/date.js Co-Authored-By: Enrique Piqueras <[email protected]>
* Fix: changing month or day in post publish date closes the popover. * Update packages/components/src/date-time/date.js Co-Authored-By: Enrique Piqueras <[email protected]> * Update packages/components/src/date-time/date.js Co-Authored-By: Enrique Piqueras <[email protected]>
This one deserves an e2e test :) |
Hi @youknowriad, I totally agree, I will look into creating a simple e2e test. |
Description
Fix: #17042
Currently, changing the month using previous/next buttons in the date picker closes the popover making it unusable and making post scheduling an arduous task.
The problem happens because when we click previous/next buttons, a focus lose occurs. I did lots of debugging, and I did not found a cause for this in our code. We will need an upstream commit on react-dates. But until then, this PR uses onPrevMonthClick/onNextMonthClick events to force the focus to be inside the focusable region.
How has this been tested?
I checked that I could change the day or month in the post scheduler, and the popover does not close.