diff --git a/src/index.tsx b/src/index.tsx index f83a11db..e5fb421c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -281,6 +281,10 @@ class ReactQuill extends React.Component { editor.setContents(delta); postpone(() => this.setEditorSelection(editor, selection)); } + + if (this.editor && this.props.tabIndex !== prevProps.tabIndex) { + this.setEditorTabIndex(this.editor, this.props.tabIndex); + } } instantiateEditor(): void { @@ -402,9 +406,13 @@ class ReactQuill extends React.Component { } } - setEditorTabIndex(editor: Quill, tabIndex: number) { - if (editor?.scroll?.domNode) { - (editor.scroll.domNode as HTMLElement).tabIndex = tabIndex; + setEditorTabIndex(editor: Quill, tabIndex?: number) { + const node = editor?.scroll?.domNode as HTMLElement | undefined; + if (!node) return; + if (tabIndex != null) { + node.tabIndex = tabIndex; + } else { + node.removeAttribute('tabindex'); } } diff --git a/test/index.js b/test/index.js index 5bb1cafe..e87dadb3 100644 --- a/test/index.js +++ b/test/index.js @@ -14,6 +14,7 @@ const { Quill } = require('../lib/index'); const { mountReactQuill, getQuillInstance, + getQuillDOMNode, getQuillContentsAsHTML, setQuillContentsFromHTML, withMockedConsole, @@ -185,6 +186,13 @@ describe('', function() { expect(wrapper.getDOMNode().querySelector('div#venus')).not.to.be.null; }); + it('updates tabIndex on the editor when the prop changes', () => { + const wrapper = mountReactQuill({ tabIndex: 3 }); + expect(getQuillDOMNode(wrapper).tabIndex).to.equal(3); + wrapper.setProps({ tabIndex: 5 }); + expect(getQuillDOMNode(wrapper).tabIndex).to.equal(5); + }); + /** * This can't be tested with the current state of JSDOM. * The selection functions have been shimmed in this test suite,