diff options
| -rw-r--r-- | src/client/views/collections/PreviewCursor.tsx | 9 | ||||
| -rw-r--r-- | src/client/views/nodes/FormattedTextBox.tsx | 6 |
2 files changed, 10 insertions, 5 deletions
diff --git a/src/client/views/collections/PreviewCursor.tsx b/src/client/views/collections/PreviewCursor.tsx index cbf36cf9e..5d621f321 100644 --- a/src/client/views/collections/PreviewCursor.tsx +++ b/src/client/views/collections/PreviewCursor.tsx @@ -37,13 +37,13 @@ export class PreviewCursor extends React.Component<PreviewCursorProps> { @action cleanupInteractions = () => { - document.removeEventListener("keypress", this.onKeyPress, true); + document.removeEventListener("keypress", this.onKeyPress, false); } @action onCursorPlaced = (visible: boolean, downX: number, downY: number): void => { if (visible) { - document.addEventListener("keypress", this.onKeyPress, true); + document.addEventListener("keypress", this.onKeyPress, false); this._lastX = downX; this._lastY = downY; } else @@ -52,8 +52,11 @@ export class PreviewCursor extends React.Component<PreviewCursorProps> { @action onKeyPress = (e: KeyboardEvent) => { + // Mixing events between React and Native is finicky. In FormattedTextBox, we set the + // DASHFormattedTextBoxHandled flag when a text box consumes a key press so that we can ignore + // the keyPress here. //if not these keys, make a textbox if preview cursor is active! - if (!e.ctrlKey && !e.altKey && !e.defaultPrevented) { + if (!e.ctrlKey && !e.altKey && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) { //make textbox and add it to this collection let [x, y] = this.props.getTransform().transformPoint(this._lastX, this._lastY); let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "new" }); diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 30fa1342e..512ad7d70 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -158,17 +158,19 @@ export class FormattedTextBox extends React.Component<FieldViewProps> { } }) } - onKeyPress(e: React.KeyboardEvent) { e.stopPropagation(); + // stop propagation doesn't seem to stop propagation of native keyboard events. + // so we set a flag on the native event that marks that the event's been handled. + // (e.nativeEvent as any).DASHFormattedTextBoxHandled = true; } render() { return (<div className="formattedTextBox-cont" + onKeyDown={this.onKeyPress} onKeyPress={this.onKeyPress} onPointerDown={this.onPointerDown} onContextMenu={this.specificContextMenu} // tfs: do we need this event handler - onKeyDown={this.onKeyPress} onWheel={this.onPointerWheel} ref={this._ref} />) } |