Meteor React using TinyMce with react-tinymce problems with iPad

help
1

I have an app with Meteor React using TinyMce through react-tinymce (as per instructions at https://www.tinymce.com/docs/integrations/react/

I have a form component with TinyMCE which is called from an orderedlist to allow users to add comments. It works as expected except in the following situation:

When using either an iPad or iPhone (works fine on desktops and Android mobile).
The first instance of the form works as expected, however with subsequent attempts to add comments the cursor does not show up in TinyMCE and the user cannot enter their comments.
Without an external keyboard, when the form is opened the keyboard pops up - I have found that by manually closing the keyboard, then tapping in the textarea again it works.
With an external keyboard (on iPad), clinking the link in the menubar (I am using the link plugin) and then closing it and tapping in the textarea again it works.
I have attached code to show how TinyMCE is initiated (and removed), as well as how it is called in the form.

Any suggestions as to what I can try to get this to work properly on an iPad/iPhone would be greatly appreciated.

componentDidMount() {
tinymce.remove();
tinymce.init({
selector: '.addComments,
    plugins: "autoresize link paste",
    paste_as_text: true,
    autoresize_bottom_margin: 10,
    relative_urls: false,
    link_title: false,
    default_link_target: "_blank",
    height: 200,
    autoresize_max_height: 200,
    toolbar: 'underline italic numlist link',
    menubar: '',
    skin: "lightgray",
    statusbar: false,
    content_css : '/css/content.css'
 });
}

componentWillUnmount() {
    tinymce.remove();
}

And it is rendered as follows:

<div className="AddComments" id={`background${this.props.meetingId}`} onChange={this.handleEditorChange}></div>
2

I found that others were having problems with TinyMCE on an iPad, so I switched to react-quill and it works across all platforms.