React: The keyboard shows and hide when clicking on input in android/chrome

[Aykelith]

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

What is the current behavior?
On Android, with Chrome, when click on an input the keyboard show and hides immediately thus cannot use the input because no keyboard. This behaviour is only on portrait mode.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
The site with the problem(the login page) can be found at https://crm.panoro.ro
JSFiddle with the code: https://jsfiddle.net/4u71ry9b/
From what I tested the JSFiddle works on the devices where the input on my page doesn't. But I don't do nothing differently than what is in the JSFiddle. Some devices works correctly, some not. Tested on Samsung Galaxy S9 and Huaweii P20 Pro and doesn't work, but on Samsung Galaxy Tab8 works.

What is the expected behavior?
The keyboard to show and stay in order to write data in the input.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
"react": "^16.6.0",
"react-dom": "^16.6.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
Chrome(on android): 70.0.3538.80(Samsung Galaxy S9, doesn't work), 69.0.3497.100 (Galaxy Tab8, works)

[Xizario]

@Aykelith This happens because of the adaptiveness of your page. Can replicate in on desktop:

1. Open your site in new browser window.
2. Focus some of your inputs.
3. Now resize the window: make it smaller. (similar like when the keyboard on mobile is shown, the window become smaller.)
4. At some point you repaint the whole app and the focus is lost.

You have this code in your page, that most probably is causing the whole problem:

    window.addEventListener("resize", function() {
        console.log("RESIZE"),
        (window.g_screenSize > window.g_screenHeight && document.documentElement.clientWidth < document.documentElement.clientHeight || window.g_screenSize < window.g_screenHeight && document.documentElement.clientWidth > document.documentElement.clientHeight) && (window.g_screenSize = document.documentElement.clientWidth,
        window.g_screenHeight = document.documentElement.clientHeight,
        o.a.unmountComponentAtNode(document.getElementById("main")),
        Gf())
    })

[gaearon]

I don't see any reason why you'd expect this to be a React specific issue. If it's React specific please prepare an example that doesn't use React and doesn't exhibit the problem.

[oniagba]

@Aykelith This happens because of the adaptiveness of your page. Can replicate in on desktop:

1. Open your site in new browser window.
2. Focus some of your inputs.
3. Now resize the window: make it smaller. (similar like when the keyboard on mobile is shown, the window become smaller.)
4. At some point you repaint the whole app and the focus is lost.

You have this code in your page, that most probably is causing the whole problem:

    window.addEventListener("resize", function() {
        console.log("RESIZE"),
        (window.g_screenSize > window.g_screenHeight && document.documentElement.clientWidth < document.documentElement.clientHeight || window.g_screenSize < window.g_screenHeight && document.documentElement.clientWidth > document.documentElement.clientHeight) && (window.g_screenSize = document.documentElement.clientWidth,
        window.g_screenHeight = document.documentElement.clientHeight,
        o.a.unmountComponentAtNode(document.getElementById("main")),
        Gf())
    })

Man...you saved me after 4 hours of trying to fix this