ql-align html tag in custom toolbar throw error

I want to create a custom toolbar in HTML, but when I add ql-align tag, I got this error:

TypeError: Cannot read property 'innerHTML' of null
    at IconPicker.selectItem (quill.js:9693)
    at new IconPicker (quill.js:9684)
    at quill.js:6739
    at Array.map (<anonymous>)
    at SnowTheme.buildPickers (quill.js:6734)
    at SnowTheme.extendToolbar (quill.js:9851)
    at SnowTheme.addModule (quill.js:6703)
    at quill.js:6049
    at Array.forEach (<anonymous>)
    at SnowTheme.init (quill.js:6047)

Steps for Reproduction

code in html:

<select class="ql-align" />

Platforms: Chrome 68 on Mac 10.12.6

Version: “quill”: “^1.3.6”

[jvnlwn]

Ran into this error when using react-quill (version 1.3.5, quill version 1.3.7).

In my case, it was occurring when rendering multiple quill editors each with their own custom toolbar.

const QuillEditor = () => (
  <>
    <div className="toolbar">
      <select className="ql-align" />
    </div>
    <ReactQuill modules={{ toolbar: ".toolbar" }} />
  </>
)

const App = () => (
  <>
    <QuillEditor />
    <QuillEditor />
  </>
)

Rendering <App /> will fail with the error Unhandled Rejection (TypeError): Cannot read property 'innerHTML' of null

Without the custom toolbar, the error is resolved:

const QuillEditor = () => (
  <ReactQuill modules={{ toolbar: [[{ align: [] }]] }} />
)

To fix the issue in my case, the solution was to provide a unique className to the toolbar:

const QuillEditor = ({ className }) => (
  <>
    <div className={`toolbar ${className}`}>
      <select className="ql-align" />
    </div>
    <ReactQuill modules={{ toolbar: `.${className}` }} />
  </>
)

const App = () => (
  <>
    <QuillEditor className="test-1" />
    <QuillEditor className="test-2" />
  </>
)

And in my real-world case, I elected to generate a unique className on the fly when the component mounts, this way I don’t have to supply one whenever I render the component.

NOTE: Ideally, quill would allow you to alternatively provide the actual HTML node as the container. That would remove the need for unique classNames or IDs. Maybe this is already possible? But it did not seem to work when I tried.

[LeonPru]

Facing the same issue. Would love to know how you “rendered again”. @Heyxuxiaoting