trix Custom toolbars can't be placed below the editor

Placing the toolbar below the editor results in errors:

Uncaught TypeError: Cannot read property 'querySelectorAll' of null
    at s.resetDialogInputs (trix.js:17)
    at new s (trix.js:17)
    at new a (trix.js:20)
    at HTMLElement.connect (trix.js:21)
    at HTMLElement.n (trix.js:15)

Steps to Reproduce

<main>
  <trix-editor toolbar="my_toolbar" input="my_input"></trix-editor>
  <div class="more-stuff-inbetween"></div>
  <trix-toolbar id="my_toolbar"></trix-toolbar>
</main>

Details

Trix version: 1.0.0
Browser name and version: Chrome 71
Operating system: Mac OS 10.14

Jan 28 '19 15:01 simmerz

Thanks! I was able to reproduce this and will start thinking about possible fixes. In the meantime, here are a couple workarounds you could consider.

Load your JavaScript asynchronously using <script defer>:

defer This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.

<head>
  <script src="trix.js" defer></script>
</head>
<body>
  <main>
    <trix-editor toolbar="my_toolbar"></trix-editor>
    <div class="more-stuff-inbetween">…</div>
    <trix-toolbar id="my_toolbar"></trix-toolbar>
  </main>
</body>

Place the toolbar below the editor using CSS while keeping it first in document order:

<head>
  <style>
    main {
      display: flex;
      flex-direction: column-reverse;
    }
  </style>
  <script src="trix.js"></script>
</head>
<body>
  <main>
    <trix-toolbar id="my_toolbar"></trix-toolbar>
    <div class="more-stuff-inbetween">…</div>
    <trix-editor toolbar="my_toolbar"></trix-editor>
  </main>
</body>

Jan 29 '19 14:01 javan

Thanks @javan - I've moved the toolbar above the editor for now, but actually defer would have been a better move anyway. Looking forward to moving it back down soon! I did look to try and submit a PR, but couldn't work out where to start.

Jan 29 '19 18:01 simmerz