React medium editor - need to click twice to be able to write if clicking on placeholder

I am using react-medium-editor v. ^1.8.1 in my project. I have the medium editor as an input field in my form:

    <MediumEditor
      key={readOnly}
      id="oppgavetekst"
      value={(translation && translation.text[translate]) || ''}
      placeholder="Translate text..."
      disabled={translate === 'from' || readOnly}
      style={{minHeight: 350}}
      onChange={(text) => onChange({name: 'examText', value: text})}
    />

And the MediumEditor component looks like this:

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 (
      <div style={{ position: 'relative', height: '100%' }} {...restProps}>
        {disabled && <div style={{
          position: 'absolute',
          width: '100%',
          height: '100%',
          cursor: 'not-allowed',
          zIndex: 1
        }} />}
        <Editor
          id={id}
          data-testid={`medium-editor-${id}`}
          options={{
            toolbar: {
              buttons: ['bold', 'italic', 'underline', 'subscript', 'superscript']
            },
            spellcheck: false,
            disableEditing: disabled,
            placeholder={text: placeholder || "Exam task..."}
          }}
          onChange={text => onChange(stripHtml(text) === '' ? '' : fixExcelPaste(text))}
          text={value}
          style={{
            ...style,
            background: disabled ? 'transparent' : 'white',
            borderColor: disabled ? 'grey' : '#FF9600',
            overflowY: 'auto',
            color: '#444F55',
          }}
        />
      </div>
    )
  }
}

export default MediumEditor;

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?

I have tried to create a codesandbox here but for some reason editor styling is not working.

Please make your placeholder translucent by adding this to your global css file:

.medium-editor-placeholder:after {
  pointer-events: none;
}

Clicking on it will select the element behind it.

If you inspect the element in chrome devtools, you can see that the placeholder element overshadows the input element behind it.

From: text selection on a element behind an absolute element

The pointer-events: none apply styling to the placeholder element that make you click it.