IOS keyboard doesn't open while autofocusing? aka. Fake it till you make it!

In IOS mobile devices (at least in Safari), the keyboard isn't allowed to show up without the user clicking on the input field. It's by design, BUT you can do something about it.
I call it:

Fake it till you make it

All you should do it creating a fake input element and telling IOS that you are on that input while actually 1000ms later you already deleted the element.
IOS doesn't detect that the input is deleted and your keyboard stays opened.
What to do? here we go:
Let's say you want to toggle a search pop up with a text input inside it.
first you open it in any way you do in your code:
const toggleSearch = () => {
setSearchOpen(!searchOpen);
// here
}

then you add this to the function.

...
const fakeInput = document.createElement('input');
fakeInput.setAttribute('type', 'text');
fakeInput.style.position = 'absolute';
fakeInput.style.opacity = 0;
fakeInput.style.height = 0;
fakeInput.style.fontSize = '16px'; // disable auto zoom
document.body.prepend(fakeInput);
fakeInput.focus();
setTimeout(() => {
// cleanup the fake input
fakeInput.remove();
}, 1000);
};

Those style lines are only to hide, prevent to zoom and change your layout height. No more than that.

Enjoyed? happy hacking!!