Always render hidden input

This avoids mysterious timing issues in which the editor gets a 'focus'
event in a state where `isVisible` returns false. If we always render
the hidden input, we can always focus it.

Signed-off-by: Antonio Scandurra <as-cii@github.com>
This commit is contained in:
Nathan Sobo 2017-08-14 11:53:02 -06:00 committed by Antonio Scandurra
parent 2f2d62ca51
commit 433c514673
2 changed files with 19 additions and 4 deletions

View File

@ -203,6 +203,22 @@ describe('TextEditorElement', () => {
expect(document.activeElement).toBe(element.querySelector('input'))
})
})
describe('if focused when invisible due to a zero height and width', () => {
it('focuses the hidden input and does not throw an exception', () => {
const parentElement = document.createElement('div')
parentElement.style.position = 'absolute'
parentElement.style.width = '0px'
parentElement.style.height = '0px'
const element = buildTextEditorElement({attach: false})
parentElement.appendChild(element)
jasmineContent.appendChild(parentElement)
element.focus()
expect(document.activeElement).toBe(element.component.getHiddenInput())
})
})
})
describe('::setModel', () => {

View File

@ -552,6 +552,7 @@ class TextEditorComponent {
]
} else {
children = [
this.renderCursorsAndInput(),
this.renderBlockDecorationMeasurementArea(),
this.renderCharacterMeasurementLine()
]
@ -1449,16 +1450,14 @@ class TextEditorComponent {
this.scheduleUpdate()
}
const {hiddenInput} = this.refs.cursorsAndInput.refs
hiddenInput.focus()
this.getHiddenInput().focus()
}
// Called by TextEditorElement so that this function is always the first
// listener to be fired, even if other listeners are bound before creating
// the component.
didBlur (event) {
const {cursorsAndInput} = this.refs
if (cursorsAndInput && event.relatedTarget === cursorsAndInput.refs.hiddenInput) {
if (event.relatedTarget === this.getHiddenInput()) {
event.stopImmediatePropagation()
}
}