Skip to content

Dropdowns and dialogs not working after navigation with Turbolinks #5274

@spohlenz

Description

@spohlenz

What is the current behavior? Describe the bug

When using TinyMCE 5 with Turbolinks, dropdowns and dialogs cease to work after navigating to another page. A full page reload is required in order for the functionality to return. Re-initializing TinyMCE with calls to tinymce.remove() and tinymce.init() does not resolve the issue.

This was first reported to me in spohlenz/tinymce-rails#257.

Please provide the steps to reproduce and if possible a minimal demo of the problem.

I've put together a demo at https://jsfiddle.net/hbjpmqgv/1/. The dropdowns initially work correctly, but after clicking the button to simulate a Turbolinks page transition (where the body element is replaced), the dropdowns (menu and format selector) no longer appear when clicked. These fail silently (no console messages).

Clicking on a dialog button fails with a console message:

Could not find representing in {
  "dom": {
    "tag": "div",
    "classes": [
      "tox-dialog__content-js"
    ],
    "attributes": {}
  },
 ...

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE?

Tested across latest public releases of Chrome, Safari and Firefox. All are affected.

Tested using TinyMCE 5.1.2 but appears to affect all v5 releases. This problem did not exist in v4.

What seems to be happening and a potential fix

After the page is (re)loaded via Turbolinks, the sink element (<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div>) does not appear within the new page body. Presumably there is a reference to the old (unattached) sink div and the dropdown elements are being rendered there.

The issue seems to be caused by the body element being cached here:
https://github.com/tinymce/tinymce/blob/master/modules/sugar/src/main/ts/ephox/sugar/api/node/Body.ts#L18-L20

Removing the caching from this function solves the problem. However I am not sure if there are performance considerations, or if perhaps there needs to be both cached and uncached versions of this function.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions