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 autocomplete suggestion list positioning #11803

Merged
merged 1 commit into from Nov 14, 2018

Conversation

Projects
None yet
3 participants
@talldan
Contributor

talldan commented Nov 13, 2018

Description

Fixes misalignment of the URL Input autocomplete suggestions.

Issue
The autocomplete list renders in a popover, and positions itself relative to its parent. After some refactoring of the components used in the URL inputs (#10495), the list became misaligned due to a different parent being used.

Fix
This makes the suggestion list a child of the wrapping div around the input and adjusts the width of the suggestion list narrower to match the input.

How has this been tested?

Manually tested button block and paragraph inputs

Screenshots

Before
Before
screen shot 2018-11-13 at 5 43 51 pm

After
screen shot 2018-11-13 at 5 37 24 pm
screen shot 2018-11-13 at 5 37 12 pm

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
@afercia

This comment has been minimized.

Contributor

afercia commented Nov 13, 2018

@talldan thanks for working on this! I think there's another undesired effect from #10495: as the ellipsis button is now outside of the form element, pressing Escape doesn't close the link popover any longer. See the onKeyDown function is bound to the form (LinkEditor) element.

In previous versions, pressing Escape on the ellipsis button or its expanded setting panel, did close the link popover.

@afercia

This comment has been minimized.

Contributor

afercia commented Nov 13, 2018

Ah sorry I've seen only now your comment on #10838 (comment)

@talldan talldan requested a review from noisysocks Nov 13, 2018

@noisysocks

👍

@talldan talldan added this to the 4.4 milestone Nov 14, 2018

@talldan talldan merged commit 8bdd73e into master Nov 14, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@talldan talldan deleted the fix/link-autocomplete-positioning branch Nov 14, 2018

grey-rsi pushed a commit to OnTheGoSystems/gutenberg that referenced this pull request Nov 22, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment