inline Editor in shadow dom: Does not work on iOS

[madeInLagny]

Affected part of DeckDeckGo

• [ X] Web Components

Issue with inline Editor

Reproduction

Steps to reproduce:

Import lit
import { html, css } from 'lit-element';

Import inline Editor by cdn
<script type="module" src="https://unpkg.com/@deckdeckgo/inline-editor@latest/dist/deckdeckgo-inline-editor/deckdeckgo-inline-editor.esm.js"></script>

listen to selectionchange event:

connectedCallback() {
    super.connectedCallback();
    document.addEventListener('selectionchange', () => {
      // Obtain the selection from component's shadow root
      this.selection = this.shadowRoot?.getSelection();

      if (!this.selection) {
        return;
      }

      // Obtain the inline-editor element
      // Here we assume that the element is added directly to document
      this.inlineEditor = this.shadowRoot.getElementById(
        'deckgo-inline-editor'
      );
      this.inlineEditor.displayTools(this.selection);
    });
  }

Add editor in HTML

render() {
    return html`
      <deckgo-inline-editor
        id="deckgo-inline-editor"
        handle-global-events="false"
      >
      </deckgo-inline-editor>

      
      <h1 class="h1" contenteditable>Inline Editor Test</h1>

Expected Behavior

Inline editor should appear below text selection.

Actual Behavior

Works on Android + Windows in Chrome and Edge.
Does not work on iOS (tested on Safari and Chrome).

[peterpeterparker]

I remember having issue with the selectionchange event on iOS. Did you double check that displayTools is effectively called on iOS?

If yes and if it seems all good, you can also try to set mobile to false. Per default it will detect mobile devices and will display to component with a fixed value at the top or bottom of the screen because of the display of the virtual keyboard on mobile devices.

[madeInLagny]

selectionchange event is caught by the listener, even on iOS. It breaks at this.shadowRoot?.getSelection(). I googled around and got confused on whether that method is available on iOS or not.

[peterpeterparker]

Yes it should but, worth double checking.

Like I said in my previous msg:

1. check that you effectively call displayTools
2. if it does, then try maybe to set mobile to false

If still does not work, you are most welcome to provide a sample repo to reproduce the error or, why not, a PR to fix the issue.

[madeInLagny]

displayTools is not called. Method stops at getSelection() since it returns a null object. I will work on a repo. Thanks <https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail> Garanti sans virus. www.avast.com <https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail> <#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2> Il giorno dom 10 ott 2021 alle ore 08:59 David Dal Busco < ***@***.***> ha scritto:

…

Yes it should but, worth double checking. Like I said in my previous msg: 1. check that you effectively call displayTools 2. if it does, then try maybe to set mobile to false If still does not work, you are most welcome to provide a sample repo to reproduce the error or, why not, a PR to fix the issue. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1348 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANAR2M43WPXH4BXHV76PMLLUGE2WZANCNFSM5FVQI77A> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[peterpeterparker]

In that case there is not much we can do, the issue is not related to the web component.
Therefore I close this issue.

Of course if you would fix the call and if the component would still not be displayed, ping me to reopen it.

Good luck 🤞