Popup with input field's auto Focus not work as expected

[ramyamahi]

Bug Report

Steps

I created a popup with the input field's autoFocus. click and open the popup with the input field.

Expected Result

At the time of popup open, it shouldn't scroll to the top of the page.

Actual Result

At the time of popup open, it will scroll to the top of the page.

Testcase

https://codesandbox.io/s/semantic-ui-example-xuich

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[brianespinosa]

This is an interesting edge case. Only happens due to the popup being rendered in a portal. And only happens when using autofocus. Triaging to needs engineering.

[mchountasis]

Is there any update or a work around for this issue please?

[meltyshev]

I faced the same problem.

As a workaround, I used the preventScroll option for the focus method, but an options parameter is not passed to the referenced input (PR with the fix: https://github.com/Semantic-Org/Semantic-UI-React/pull/4398).

So I created an extended Input component with an overridden focus method:

import { Input as SemanticUIInput } from 'semantic-ui-react';

export default class Input extends SemanticUIInput {
  focus = (options) => this.inputRef.current.focus(options);
}

Then I called the focus method manually in useEffect:

useEffect(() => {
  inputRef.current.focus({
    preventScroll: true
  });
}, []);

Updated testcase: https://codesandbox.io/s/semantic-ui-example-forked-fwx6pt?file=/example.js