Not working on safari

[crysfel]

Hey folks, I've been using this component successfully on Chrome and Firefox, but when it comes to safari it just doesn't work, I'm seeing the contenteditable="true" in the DOM but the content is not editable.

Here's how I'm using the component:

<ContentEditable
              innerRef={this.node}
              html={this.state.text}
              // disabled={disabled}
              onChange={this.onChange}
              onBlur={this.onBlur}
              tagName="p"
              className="cursor-text whitespace-pre-wrap"
              data-gramm_editor="false"
              data-gramm="false"
          />

Any idea what might be wrong?

[crysfel]

Found the problem!! Safari has the user-select CSS setting as none by default, this can be fixed by adding the following CSS:

[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

[cantrellnm]

Would it make sense to add these styles by default to ContentEditable? Or at least add it to "Known Issues" in the readme? It's a simple fix but without it ContentEditable doesn't work at all in Safari.

[jeffminsungkim]

Found the problem!! Safari has the user-select CSS setting as none by default, this can be fixed by adding the following CSS:

[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

@crysfel I'm curious about which version of Safari browser the issue occurred in. It seems that there are no issues in version 16.0.