Trix: Trix Text Input Area Not Selectable In Safari

[JimCook57]

Ok this is a strange one. Before I try and create some minimal code to reproduce this, I will run this by you and see if you are aware of this. The code works perfectly in Chrome and Firefox, but not on Safari.

I am dynamically adding a trix-editor html element and I wait for it to initialize by listening to the "trix-initialize" event. I then load content into it using the editor.loadHTML function.

When I do this on safari, the text input area is not selectable (a cursor doesn't appear when I click on it). The tool bar works. But when I click on the text input area and type in something like abc123 I see nothing until I click on a toolbar function like B (bold) and then the text appears in the input area... but in reverse. 321cba .

Have you seen this before and know of a fix? If not, I will try and create a test case that will reproduce this.

Details

• Trix version: 11
• Browser name and version: Safari Version 10.1.2 (12603.3.8)
• Operating system: OSX 10.12.6

[javan]

Have you seen this before and know of a fix?

I have not. I did a quick test and it seems to work fine in Safari: https://jsfiddle.net/javan/kyedp9bf/

[JimCook57]

Thanks for the fiddle. It helped may me track this down. It is when the is in a draggable div. Here is the use case that breaks it:

var h="<div draggable='true'><trix-editor></trix-editor></div>";
document.addEventListener("trix-initialize", function(event) {
event.target.editor.loadHTML("abc123")});
document.body.innerHTML=h;

[javan]

Ah, yeah, you'll probably want to avoid draggable around an editor generally. It's not Trix-specific, try opening http://data:text/html,<div%20draggable="true"><div%20contenteditable>abc123</div></div> in Safari.

[javan]

This is more or less how we avoid dragging input elements in Basecamp:

$(document).on("mousedown", "[data-behavior~=draggable]", function(event) {
  var $target = $(event.target)
  var $element = $(this)

  if ($target.closest("[contenteditable]").length || $target.is(":input")) {
    // Skip dragging input element
  } else {
    // Make element draggable
    $element.attr("draggable", true)
  }
})

[jessehanley]

Stumbled upon a similar issue in my app, solved by adding a sprinkle of CSS:

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

Just leaving here incase someone else runs into it and is scratching their head.

[mikesnare]

FWIW, the above referenced fix did not work for me because we are setting user-select to none for all elements by default using a rule that applies to *. Since the trix-editor is a contenteditable that contains other elements, if you're in that same boat as us you'll need to apply the rule like so:

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