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: Fix Post Publishing Popover moving when certain dates are clicked #30298

Merged

Conversation

allilevine
Copy link
Contributor

Description

Fix Post Publishing popover glitch by changing the popover anchor ref to the containing div (PanelRow). Requires changing PanelRow to accept a forwarding ref.

Alternatively, we can change PanelRow to accept a ref as a prop and include the forwardRef() wrapper in PostSchedule instead.

Fixes #29899

How has this been tested?

  • Add or edit a post.
  • Open the Post Publishing popover by clicking on the publish date or "Immediately."
  • Click on various dates in the picker and confirm that the popover does not move or change position.
  • Regression: check that other instances of the PanelRow component function correctly and don't require a ref.

Screenshots

popovernotmoving

Types of changes

Bug fix:

  • Changes the PanelRow component to accept a forwarding ref
  • Creates a ref in PostSchedule and assigns it to PanelRow
  • Passes the ref to Dropdown as an anchor ref and popover prop

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

Fix Post Publishing popover glitch by changing the popover anchor ref to
the containing div (PanelRow). Requires changing PanelRow to accept a
forwarding ref.
@allilevine allilevine force-pushed the fix/publish-posts-popover-glitch branch from f8a242f to 7d7377a Compare April 5, 2021 16:21
Copy link
Contributor

@retrofox retrofox left a comment

Choose a reason for hiding this comment

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

LGTM. Although I guess it's possible to deal with this visual issue via CSS keeping the popover stuck to a position, this solution looks good to me.
I'd like to know the opinion of core folks, though.
@ellatrix @youknowriad could you chime on this, please?

@retrofox
Copy link
Contributor

retrofox commented Apr 7, 2021

Thanks, Allison for dealing with this uncomfortably annoying visual issue 😅. Considering that the approach doesn't have any objection and it works well, I'm going to merge it.

@retrofox retrofox merged commit 9c09a52 into WordPress:trunk Apr 7, 2021
@github-actions github-actions bot added this to the Gutenberg 10.5 milestone Apr 7, 2021
@priethor priethor added [Package] Components /packages/components [Type] Bug An existing feature does not function as intended labels Apr 9, 2021
@priethor priethor changed the title Fix Post Publishing Popover: Popover moves when certain dates are clicked Components: Fix Post Publishing Popover moving when certain dates are clicked Apr 9, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Post Publishing Popover: Popover moves when certain dates are clicked
4 participants