blueprint v3 autofocus in InputGroup (probably others) inside of popover causing scroll to jump

[tnrich]

I have an InputGroup with autoFocus=true inside a popover that must be scrolled to be reached. When I open the popover, the page is scrolled to the very top, even though all I did was click a button. You can see this in the gif below:

I imagine that this isn't just confined to InputGroup but probably any blueprint element that can autofocus.

Here's a reproduction of it:

https://codesandbox.io/s/m38yvkywxp

Thanks!

[tnrich]

@giladgray bump :)

[giladgray]

@tnrich i was able to resolve this in the select package by disabling autoFocus and re-implementing it with requestAnimationFrame. https://github.com/palantir/blueprint/blob/develop/packages/select/src/components/select/select.tsx#L200

[tnrich]

Thanks @giladgray that'll be in the new release I take it?!

[giladgray]

pretty sure it's released, but that's just in select. i haven't touched the popover logic in some time.

[giladgray]

@tnrich might you have time to port this change to Popover itself?

[sccdGyan]

Hi, any update on this issue?

[ro-savage]

Similar issue.

We have a Popover, with a button in it that is set to autoFocus it makes the screen jump to the top of the page whenever the popover is opened.

[ro-savage]

We solved this by adding this to our button component

 const buttonRef = useRef(null);
  requestAnimationFrame(() => {
    if (buttonRef.current !== null && props.autoFocus) {
      buttonRef.current.focus();
    }
  });

<button ref={buttonRef}>My Autofocus Button</button>

Thanks @giladgray but would be great if this could be done in the popover somehow.

[DustinRobison]

I have a similar issue with the auto scrolling page to top when 2 popover2's are open at once. Such as with a hover popover if someone mouse over from one to another quickly the delay close on the hover will cause 2 popovers to be open briefly and scroll to top of the page.

I mitigated this issue by removing the close time: hoverCloseDelay={0}

[JoeDuncko]

@tnrich might you have time to port this change to Popover itself?

@giladgray any ideas how one might port this change to the popover itself? I can't figure out a good way unless either the popover takes a ref to the node that we want autofocus to be triggered on, which doesn't seem like good DX to me.