title: React medium editor - need to click twice to be able to write if clicking on placeholder
body: <p>I am using <a href="https://github.com/wangzuo/react-medium-editor" rel="nofollow noreferrer">react-medium-editor</a> v. ^1.8.1 in my project. I have the medium editor as an input field in my form:</p>
  <pre><code>    &lt;MediumEditor
        key={readOnly}
        id=&quot;oppgavetekst&quot;
        value={(translation &amp;&amp; translation.text[translate]) || ''}
        placeholder=&quot;Translate text...&quot;
        disabled={translate === 'from' || readOnly}
        style={{minHeight: 350}}
        onChange={(text) =&gt; onChange({name: 'examText', value: text})}
      /&gt;
  </code></pre>
  <p>And the MediumEditor component looks like this:</p>
  <pre><code>class MediumEditor extends React.Component {
    static props = {
      id: PropTypes.string,
      value: PropTypes.string,
      onChange: PropTypes.func,
      disabled: PropTypes.bool,
      uniqueID: PropTypes.any,
      placeholder: PropTypes.string,
      style: PropTypes.object,
    };
  
    shouldComponentUpdate(nextProp) {
      if(nextProp.forcedUpdate !== this.props.forcedUpdate)
        return true;
  
      return false;
    }
  
  
    render() {
      const {id, value, onChange, disabled, placeholder, style, uniqueID, forcedUpdate, ...restProps} = this.props;
      return (
        &lt;div style={{ position: 'relative', height: '100%' }} {...restProps}&gt;
          {disabled &amp;&amp; &lt;div style={{
            position: 'absolute',
            width: '100%',
            height: '100%',
            cursor: 'not-allowed',
            zIndex: 1
          }} /&gt;}
          &lt;Editor
            id={id}
            data-testid={`medium-editor-${id}`}
            options={{
              toolbar: {
                buttons: ['bold', 'italic', 'underline', 'subscript', 'superscript']
              },
              spellcheck: false,
              disableEditing: disabled,
              placeholder={text: placeholder || &quot;Exam task...&quot;}
            }}
            onChange={text =&gt; onChange(stripHtml(text) === '' ? '' : fixExcelPaste(text))}
            text={value}
            style={{
              ...style,
              background: disabled ? 'transparent' : 'white',
              borderColor: disabled ? 'grey' : '#FF9600',
              overflowY: 'auto',
              color: '#444F55',
            }}
          /&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default MediumEditor;
  </code></pre>
  <p>The problem I have is that if I click on placeholder I need to click one more time to be able to write in that field. If I click anywhere around the placeholder I can start writing immediately, but only where the placeholder is I need to click twice. How can I fix this?</p>
  <p>I have tried to create a <a href="https://codesandbox.io/s/delicate-shape-deskp?file=/src/index.js" rel="nofollow noreferrer">codesandbox</a> here but for some reason editor styling is not working.</p>