Join GitHub today
GitHub is home to over 31 million developers working together to host and review code, manage projects, and build software together.
Sign upSet timeout to focus input after DOM rendering #2163
Conversation
vanesa
requested review from
chrismwendt
and
lguychard
as
code owners
Feb 5, 2019
vanesa
force-pushed the
vo/fix-command-palette-fx-saf
branch
from
2ce336f
to
9bc1835
Feb 8, 2019
This comment has been minimized.
This comment has been minimized.
codecov-io
commented
Feb 8, 2019
•
Codecov Report
|
lguychard
approved these changes
Feb 8, 2019
| @@ -82,6 +84,11 @@ export class CommandList extends React.PureComponent<Props, State> { | |||
| .getContributions() | |||
| .subscribe(contributions => this.setState({ contributions })) | |||
| ) | |||
|
|
|||
| // Only focus input after it has been rendered in the DOM | |||
| setTimeout(() => { | |||
This comment has been minimized.
This comment has been minimized.
lguychard
Feb 8, 2019
Member
Can you add a comment mentioning that this is needed for FF/Safari? Otherwise the next person reading this code might think that this is redundant with preventScroll.
This comment has been minimized.
This comment has been minimized.
vanesa
merged commit 89a594f
into
master
Feb 8, 2019
1 check passed
buildkite/sourcegraph
Build #27584 passed (5 minutes, 6 seconds)
Details
vanesa
deleted the
vo/fix-command-palette-fx-saf
branch
Feb 8, 2019
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
vanesa commentedFeb 5, 2019
This fixes #631 for Safari and Firefox, where opening the command pallet scrolled the page to the bottom. This was caused by setting the autofocus attribute on the input element. The input was not yet rendered into the DOM because of it being inside a popover, which lead to the unintended scroll. Chrome accepts passing in the parameter
preventScroll: true(introduced in this PR: #1767). However, this is not compatible with Safari or Firefox: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#Browser_compatibility.Solution
Manually focus the rendered input element after the popover has opened by setting a timeout to wait for the input to be rendered in the DOM. This is a workaround solution as the library we use
Popper.jsdoesn't support callbacks to get notified when the popover has finished rendering. There was an issue about it on GitHub (FezVrasta/popper.js#412) but they didn't implement it.