From 4ca07f6f9c88680b5fc35719fe8a8fa5e0c68522 Mon Sep 17 00:00:00 2001 From: Nuurek Date: Tue, 16 Mar 2021 14:21:28 +0100 Subject: [PATCH] Fixed using EditableInput in shadow DOM. --- src/components/common/EditableInput.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/common/EditableInput.js b/src/components/common/EditableInput.js index c986df22..2408504a 100644 --- a/src/components/common/EditableInput.js +++ b/src/components/common/EditableInput.js @@ -31,7 +31,7 @@ export class EditableInput extends (PureComponent || Component) { this.props.value !== this.state.value && (prevProps.value !== this.props.value || prevState.value !== this.state.value) ) { - if (this.input === document.activeElement) { + if (this.input === this.getInputRootNode().activeElement) { this.setState({ blurValue: String(this.props.value).toUpperCase() }) } else { this.setState({ value: String(this.props.value).toUpperCase(), blurValue: !this.state.blurValue && String(this.props.value).toUpperCase() }) @@ -63,6 +63,10 @@ export class EditableInput extends (PureComponent || Component) { return this.props.arrowOffset || DEFAULT_ARROW_OFFSET } + getInputRootNode() { + return this.input.getRootNode ? this.input.getRootNode() : document; + } + handleKeyDown = (e) => { // In case `e.target.value` is a percentage remove the `%` character // and update accordingly with a percentage