What could cause a text input to sometimes be un-selectable for mobile browsers?

Question

GOAL:
Make a chat-interface which works on desktop also work on mobile.

PROBLEM:
I've thrown together a chatbot proof-of-concept. Everything is very simple, including the JS & CSS.
While I'm also having a separate issue with CSS, I suspect this issue might be a JavaScript problem.

I have a div which contains a text input. The div starts out hidden, and becomes visible when a sibling div is clicked.
Additionally (also when the sibling div is clicked), focus is placed on the text-input contained within.
Yet ...the input field is inaccessible/unavailable for some people when they test from mobile browsers.

// close invitation and open chat
document.getElementById('chatbot-invitation').addEventListener('click', function () {
    hideChatInvitation()
    showChatContainer()
});

function hideChatInvitation() {
    document.getElementById('chatbot-invitation').classList.add('hide');
}

function showChatContainer() {
    document.getElementById('chatbot-inner-wrapper').classList.remove('hide');
    document.getElementById('textInput').focus();
}

EXAMPLE:
http://temp.mosaranch.com/chatbot-tester

QUESTION:
The focus currently works on desktop browsers. Is there something that needs to be done differently for mobile browsers?