Elements loose focus when moving to or from a portal

Do you want to request a feature or report a bug?

Perhaps a bug, but could also be seen as a feature

What is the current behavior?

When you move an element to a portal through ReactDOM.createPortal the element looses focus if it had focus. If the element gains focus while in a portal, when moving out of the portal it looses focus.

What is the expected behavior?

I would have expected React to maintain focus of the element when moving in or out of a portal

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Tested with

React version: 16.2 Browsers: Latest chrome and firefox. I did not test others but expect the behaviour to be the same OS: Tested on Mac High Sierra

[dantman]

@naisergic In the first example the function is not a component, you use it and pass it’s return value to the portal. It works exactly the same as if the function didn’t exist.

i.e. The first example works as if you wrote this instead: https://codesandbox.io/s/portal-maintaining-focus-mk2gt

[dantman]

Take a look at this modification to your second example. https://codesandbox.io/s/portal-loosing-focus-b9b0k

Your ModalContainer component function is defined inside of your Portal component. So every time Portal renders a new ModalContainer function is created. Because the component is different this results in the previous component and your input being completely unmounnted and a new tree with the new ModelContainer component is rendered.