CODEWITHSUNDEEP
javascriptiosreactjsmobilegatsby
idk
idk

Reputation: 113

Opening mobile keyboard on button click

On my webpage, I have a "register now" button in the header. On click this button will scroll the user to the bottom of the page and will, ideally, focus on a form field input and open the soft keyboard on mobile devices.

I am currently executing a .focus and .click state to the element after the smooth scroll function ends. While these two statuses are being applied, they are not opening the keyboard as desired.

    componentDidMount = () => {
        Events.scrollEvent.register('end', function(to, element) {
            if(element.id === 'request-demo'){

                var inputFocus = document.getElementById('name');

                inputFocus.focus(console.log("focused"));   
                inputFocus.click(console.log("clicked"));
            }
        Events.scrollEvent.remove('end');
        });
    }

This function will open the keyboard on Android devices, but not IOS.

I am avoiding jQuery for this project, so vanilla solutions would be preferred

Upvotes: 1

Views: 2315

Answers (1)

idk
idk

Reputation: 113

IOS will not allow developers to simulate user inputs within react-scroll's scrollEvent. By removing the focus and click states from within the end of scroll event, we were able to resolve this issue

Our current interpretation is that IOS blocks developers from simulating user inputs within on event functions, however any further insight would still be greatly appreciated

Upvotes: 1

Related Questions