Events fire differently on mobile

[john-harding]

On desktop, change events fire when there is any change. On some mobile devices, change events do not fire until the user clicks out of the editor to hide the keyboard. Keyboard events are also different. While keyboard events all fire when you'd expect on both mobile and desktop, mobile has blank values that should be filled in.

Issue reproduced on: Pixel 2, Pixel, Nexus 6P Couldn't reproduce issue: iPhone X, iPhone 8, Galaxy S9, Galaxy S8 Note: iPhone testing was done using safari browser; all else was on Chrome

Here's my code:

import React, { PropTypes } from 'react';
import {Controlled as CodeMirror} from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import './FG-Theme.css';

class CodeAndPreview extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            editorCode: '',
        };
        this.handleRequests = this.handleRequests.bind(this);
    }

    handleRequests(newCode) {
console.log(newCode);
        this.setState({editorCode: newCode});
    }

    render() {
        const CodeMirrorOptions = {
            theme: 'knowledge default',
            lineNumbers: true,
            mode: 'htmlmixed',
            indentWithTabs: true,
            indentUnit: 2,
            tabSize: 2,
        };

        const CodeMirrorElem = <CodeMirror
                value={this.state.editorCode}
                onBeforeChange={ (editor, metadata, newCode) => {
console.log('%c onBeforeChange', 'color: #0af');
                    this.handleRequests(newCode);
                }}
                onChange={ (editor, metadata, newCode) => {
console.log('%c onChange', 'color: #0af');
                    this.handleRequests(newCode);
                }}
                onKeyUp={(editor, event) => {
console.log('%c onKeyUp', 'color: #0af');
console.log(event);
console.log(editor.getValue());
                    this.handleRequests(editor.getValue());
                }}
                options={CodeMirrorOptions}
            />;

        return (
            <div>
                {CodeMirrorElem}
            </div>
        );
    }
}

With the code above the following is logged to the console when typing the character "a" and when the editor was previously blank:

Desktop (Chrome 67 on Mac):

Mobile (Chrome on Nexus 6P using BrowserStack):

onBeforeChange and onChange do not fire at all on mobile, and the keyboard event is not the same (you can see in the screenshot that code is blank on mobile). Trying to grab the editor's value inside the onKeyUp function is empty. It's strange because the letter a appears in the editor on mobile, but the editor's value is blank until closing out of the keyboard.

Any thoughts?

I'm on version 5.1.0

[scniro]

@john-harding I'm sorry but I simply do not have the capacity to debug or support browser inconsistencies, especially mobile browsers. If it works in Chrome latest on my end it gets shipped - and that'll be the stance moving forward.

While I appreciate the interest and research here, I need to give a "PR's are welcomed" answer. Hope you can understand. My first thought is that codemirror events are the culprit here as this library simply piggy backs from them. Perhaps there's some gotchas within that lib itself.