JSFiddle - React, Tailwind, and code Playground

by Sergey Kulikov

HTML

<template id="component-template">
  <button>And this one is broken</button>
  <div contenteditable style="width: 200px; height: 100px; border: solid 1px grey">Focus me, press Shift+Tab, and focus again (either mouse or Tab)</div>
</template>

<h1>Cursor diappears when focusing contenteditable div from the same shadow root</h1>
<h2>Firefox 63 issue</h2>

<p>Blinking cursor disappears when moving focus from contenteditable and back again, within the same shadow root.</p>

<p>Steps to reproduce:</p>
<ul>
  <li>1. Focus the <code>contenteditable</code></li>
  <li>2. Move focus out using Shift + Tab to the button in same shadow root</li>
  <li>3. Move focus back from keyboard by pressing Tab, or by mouse</li>
  <li>4. Blinking cursor disappears</li>
</ul>

<p>Note: moving focus outside shadow root and back again works nice.</p>

<button>This one below should work</button>
<div contenteditable style="width: 200px; height: 100px; border: solid 1px grey">I'm not in the Shadow DOM and I'm happy!</div>

<component-with-shadow></component-with-shadow>

JavaScript

class ComponentWithShadow extends HTMLElement {

  connectedCallback() {
    let template = document.getElementById('component-template');
    let content = template.content.cloneNode(true);
    this.attachShadow({mode: 'open'});
    this.shadowRoot.appendChild(content); 
  }
}

customElements.define('component-with-shadow', ComponentWithShadow);