From de0f12074dd572babaeba3f1f4bfd78142f90f1d Mon Sep 17 00:00:00 2001
From: DD <liudi08@gmail.com>
Date: Thu, 15 Mar 2018 13:20:07 -0400
Subject: [PATCH 1/2] Unfocus text fields when canvas clicked

---
 src/containers/paint-editor.jsx            | 17 ++++++++++-------
 src/helper/selection-tools/reshape-tool.js |  5 +++++
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/containers/paint-editor.jsx b/src/containers/paint-editor.jsx
index 86d3f263..aebe8529 100644
--- a/src/containers/paint-editor.jsx
+++ b/src/containers/paint-editor.jsx
@@ -50,6 +50,10 @@ class PaintEditor extends React.Component {
     }
     componentDidMount () {
         document.addEventListener('keydown', this.props.onKeyPress);
+        // document listeners used to detect if a mouse is down outside of the
+        // canvas, and should therefore stop the eye dropper
+        document.addEventListener('mousedown', this.onMouseDown);
+        document.addEventListener('touchstart', this.onMouseDown);
     }
     componentDidUpdate (prevProps) {
         if (this.props.isEyeDropping && !prevProps.isEyeDropping) {
@@ -61,6 +65,8 @@ class PaintEditor extends React.Component {
     componentWillUnmount () {
         document.removeEventListener('keydown', this.props.onKeyPress);
         this.stopEyeDroppingLoop();
+        document.removeEventListener('mousedown', this.onMouseDown);
+        document.removeEventListener('touchstart', this.onMouseDown);
     }
     handleUpdateSvg (skipSnapshot) {
         // Store the zoom/pan and restore it after snapshotting
@@ -135,6 +141,10 @@ class PaintEditor extends React.Component {
         this.canvas = canvas;
     }
     onMouseDown () {
+        if (document.activeElement instanceof HTMLInputElement) {
+            document.activeElement.blur();
+        }
+
         if (this.props.isEyeDropping) {
             const colorString = this.eyeDropper.colorString;
             const callback = this.props.changeColorToEyeDropper;
@@ -164,11 +174,6 @@ class PaintEditor extends React.Component {
         this.eyeDropper.pickX = -1;
         this.eyeDropper.pickY = -1;
         this.eyeDropper.activate();
-
-        // document listeners used to detect if a mouse is down outside of the
-        // canvas, and should therefore stop the eye dropper
-        document.addEventListener('mousedown', this.onMouseDown);
-        document.addEventListener('touchstart', this.onMouseDown);
         
         this.intervalId = setInterval(() => {
             const colorInfo = this.eyeDropper.getColorInfo(
@@ -190,8 +195,6 @@ class PaintEditor extends React.Component {
     }
     stopEyeDroppingLoop () {
         clearInterval(this.intervalId);
-        document.removeEventListener('mousedown', this.onMouseDown);
-        document.removeEventListener('touchstart', this.onMouseDown);
     }
     render () {
         return (
diff --git a/src/helper/selection-tools/reshape-tool.js b/src/helper/selection-tools/reshape-tool.js
index 0ebfb433..4e42ac75 100644
--- a/src/helper/selection-tools/reshape-tool.js
+++ b/src/helper/selection-tools/reshape-tool.js
@@ -232,6 +232,11 @@ class ReshapeTool extends paper.Tool {
         this.active = false;
     }
     handleKeyDown (event) {
+        if (event.event.target instanceof HTMLInputElement) {
+            // Ignore nudge if a text input field is focused
+            return;
+        }
+
         const nudgeAmount = 1 / paper.view.zoom;
         const selected = getSelectedLeafItems();
         if (selected.length === 0) return;

From 1c093df92b5fa07cb8ad16eb25d85f6821fa0144 Mon Sep 17 00:00:00 2001
From: DD <liudi08@gmail.com>
Date: Tue, 20 Mar 2018 11:03:41 -0400
Subject: [PATCH 2/2] Only unblur inputs if you clicked on the paper canvas

---
 src/containers/paint-editor.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/containers/paint-editor.jsx b/src/containers/paint-editor.jsx
index aebe8529..a41616ea 100644
--- a/src/containers/paint-editor.jsx
+++ b/src/containers/paint-editor.jsx
@@ -140,8 +140,9 @@ class PaintEditor extends React.Component {
         this.setState({canvas: canvas});
         this.canvas = canvas;
     }
-    onMouseDown () {
-        if (document.activeElement instanceof HTMLInputElement) {
+    onMouseDown (event) {
+        if (event.target === paper.view.element &&
+                document.activeElement instanceof HTMLInputElement) {
             document.activeElement.blur();
         }