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

Pattern Inserter: Fix bug where the inserter cannot be closed if the user changes pattern category #27792

Conversation

andrewserong
Copy link
Contributor

@andrewserong andrewserong commented Dec 18, 2020

This PR removes the key from PatternInserterPanel so that the component isn't replaced when the selected category changes.

Description

As a user, if I open the inserter, click to browse patterns, and then change the pattern category, the SelectControl in PatternInserterPanel loses focus. Because the focus is now outside of the inserter, if I click the inserter button or elsewhere within the post, the inserter is not automatically closed, because the focusOutside of the inserter's useDialog.

Screenshot of the bug

pattern-inserter-the-bug-small

Note that after switching pattern category, the select element loses focus and the inserter cannot be closed via the button or clicking on the post body.

Screenshot of the fix

The fix is to remove the key attribute from PatternInserterPanel so that switching pattern category does not cause the whole panel to be replaced, so that the focus is maintained on the select element. This then ensures that clicking the inserter button, or back into the post body, will close the inserter.

pattern-inserter-the-fix-small

How has this been tested?

Manually tested in the editor:

  1. Open up the editor (post or page).
  2. Click the + icon to open the inserter.
  3. Click the Patterns tab.
  4. Click the pattern category drop-down and select any other category.
  5. Click the + icon to close the inserter, or click into the post body to close the inserter.

Types of changes

Bug fix:

  • Remove key from PatternInserterPanel in BlockPatternsTabs so that we don't lose focus when changing pattern categories

Checklist:

  • My code is tested. (manually tested)
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation. (not needed for this change)
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR. (no React Native files affected as far as I can tell)

CC: @youknowriad and @apeatling as I can see you've both touched files related to this feature recently!

Note: I don't have access to merge, so if this fix looks good, can someone please merge it in for me? Thank you! 🙇‍♂️

…don't lose focus when changing pattern categories
Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

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

Thanks for the fix.

@youknowriad youknowriad added [Feature] Inserter The main way to insert blocks using the + button in the editing interface [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced [Type] Bug An existing feature does not function as intended labels Dec 24, 2020
@youknowriad youknowriad merged commit a903b25 into WordPress:master Dec 24, 2020
@github-actions github-actions bot added this to the Gutenberg 9.7 milestone Dec 24, 2020
@andrewserong andrewserong deleted the fix/pattern-inserter-category-selection-allow-inserter-to-be-closed branch December 25, 2020 01:12
@andrewserong
Copy link
Contributor Author

Thanks for reviewing and merging! 😊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants