Skip to content

Set timeout to focus input after DOM rendering

Warren Gifford requested to merge vo/fix-command-palette-fx-saf into master

Created by: vanesa

This fixes #631 (closed) 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: https://github.com/sourcegraph/sourcegraph/pull/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.js doesn'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.

Merge request reports