Quill: ql-align html tag in custom toolbar throw error

[urjustsocool]

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"

[benbro]

Please fork the CodePen and show what you are trying to do.

[urjustsocool]

@benbro I've found the reason, I forget to clear the already mounted quill dom, rendering again lead to the error. It has nothing to do with quill. Thanks anyway, respect✌(◕‿-)✌

[akashanand708]

@Heyxuxiaoting , how did you solve this problem? I faced this problem at the exact line number.
Today, i upgraded from react 15.6.1 to react 16.8.5, after that i upgraded react quill to latest one.

[rickysychan]

@Heyxuxiaoting facing the exact same issue could you elaborate on how you fixed this?

[Leoohn]

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

[strap8]

Facing the same issue. Please share the solution please.

[urjustsocool]

Facing the same issue. Please share the solution please.

Hi，I'm sorry for my late reply.
This is how I solve this problem in my case:

didMount && <Editor /> // enter my page

this.setState({     // leave my page
    didMount: false
})

I'm not sure if it's suitable for your case, but what is important i think is to reload quill component again after you get your editor show. Set didmonut to be false when you leave current spa router view or in the componentWillUnmount period may do some help.