React-quill: Strange behavior on headers (h1,h2,etc) dropdown on toolbar

Created on 15 Mar 2017 · 5Comments · Source: zenoamaro/react-quill

Hello,

I'm having a strange behavior when I try to use the header dropdown on the toolbar to use <h1>, <h2>, etc. tags.

Basically what happens is that when I click the dropdown, is open and close immediately. I don't have time to select a header, but... when I left the click button down, and I move to the options container, I can select a header.

Here's my component code:

ReactQuill = require 'react-quill'

class QuillWrapper extends React.Component

  constructor: (props)->
    super props

    @modules = {
      toolbar: [
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
        ['bold', 'italic', 'underline','strike', 'blockquote'],
        [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
        ['link'],
        ['clean']
      ],
    }

    @formats = [
      'header',
      'bold', 'italic', 'underline', 'strike', 'blockquote',
      'list', 'bullet', 'indent',
      'link'
    ]

  displayName: 'QuillWrapper'

  shouldComponentUpdate: (nextProps,nextState)->
    nextProps.value isnt @props.value

  changeHandler: (value, delta, source)=>
    console.log "On Change..."

  onEditorChangeSelection: (range, source)=>

  render: =>

    return(

        <ReactQuill theme="snow"
                    modules={@modules}
                    formats={@formats}
                    readOnly=false
                    onChange={@changeHandler}
                    onChangeSelection={@onEditorChangeSelection}
                    value={@props.value}/>

    )

module.exports = QuillWrapper if module?.exports?

Can be this caused because it's used as a component called from other components?

That's the only toolbar option with problems, other buttons works fine.

Quill version: