From 7281e9b9ba5071be92e53c15e934ec010daeb4a1 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Thu, 14 Jan 2021 12:36:48 +1100
Subject: [PATCH] Change note text input to allow for multiline editing

---
 src/components/map/MapMenu.js   | 20 ++++++++------------
 src/components/note/NoteMenu.js | 15 ++++++++++++---
 src/contexts/KeyboardContext.js | 10 ++++++++--
 src/theme.js                    |  3 +++
 4 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/components/map/MapMenu.js b/src/components/map/MapMenu.js
index 2c79ddb..c107f6b 100644
--- a/src/components/map/MapMenu.js
+++ b/src/components/map/MapMenu.js
@@ -22,32 +22,28 @@ function MapMenu({
 
   useEffect(() => {
     // Close modal if interacting with any other element
-    function handlePointerDown(event) {
+    function handleInteraction(event) {
       const path = event.composedPath();
       if (
         !path.includes(modalContentNode) &&
-        !(excludeNode && path.includes(excludeNode))
+        !(excludeNode && path.includes(excludeNode)) &&
+        !(event.target instanceof HTMLTextAreaElement)
       ) {
         onRequestClose();
-        document.body.removeEventListener("pointerdown", handlePointerDown);
+        document.body.removeEventListener("pointerdown", handleInteraction);
+        document.body.removeEventListener("wheel", handleInteraction);
       }
     }
 
     if (modalContentNode) {
-      document.body.addEventListener("pointerdown", handlePointerDown);
+      document.body.addEventListener("pointerdown", handleInteraction);
       // Check for wheel event to close modal as well
-      document.body.addEventListener(
-        "wheel",
-        () => {
-          onRequestClose();
-        },
-        { once: true }
-      );
+      document.body.addEventListener("wheel", handleInteraction);
     }
 
     return () => {
       if (modalContentNode) {
-        document.body.removeEventListener("pointerdown", handlePointerDown);
+        document.body.removeEventListener("pointerdown", handleInteraction);
       }
     };
   }, [modalContentNode, excludeNode, onRequestClose]);
diff --git a/src/components/note/NoteMenu.js b/src/components/note/NoteMenu.js
index 552dde5..de43ef1 100644
--- a/src/components/note/NoteMenu.js
+++ b/src/components/note/NoteMenu.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useContext } from "react";
-import { Box, Input, Flex, Text, IconButton } from "theme-ui";
+import { Box, Flex, Text, IconButton, Textarea } from "theme-ui";
 
 import Slider from "../Slider";
 
@@ -98,6 +98,13 @@ function NoteMenu({
     }
   }
 
+  function handleTextKeyPress(e) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      onRequestClose();
+    }
+  }
+
   return (
     <MapMenu
       isOpen={isOpen}
@@ -115,7 +122,7 @@ function NoteMenu({
           }}
           sx={{ alignItems: "center" }}
         >
-          <Input
+          <Textarea
             id="changeNoteText"
             onChange={handleTextChange}
             value={(note && note.text) || ""}
@@ -125,8 +132,10 @@ function NoteMenu({
               ":focus": {
                 outline: "none",
               },
+              resize: "none",
             }}
-            autoComplete="off"
+            rows={3}
+            onKeyPress={handleTextKeyPress}
           />
         </Flex>
         <Box
diff --git a/src/contexts/KeyboardContext.js b/src/contexts/KeyboardContext.js
index 867c28d..8736f46 100644
--- a/src/contexts/KeyboardContext.js
+++ b/src/contexts/KeyboardContext.js
@@ -8,7 +8,10 @@ export function KeyboardProvider({ children }) {
   useEffect(() => {
     function handleKeyDown(event) {
       // Ignore text input
-      if (event.target instanceof HTMLInputElement) {
+      if (
+        event.target instanceof HTMLInputElement ||
+        event.target instanceof HTMLTextAreaElement
+      ) {
         return;
       }
       keyEmitter.emit("keyDown", event);
@@ -16,7 +19,10 @@ export function KeyboardProvider({ children }) {
 
     function handleKeyUp(event) {
       // Ignore text input
-      if (event.target instanceof HTMLInputElement) {
+      if (
+        event.target instanceof HTMLInputElement ||
+        event.target instanceof HTMLTextAreaElement
+      ) {
         return;
       }
       keyEmitter.emit("keyUp", event);
diff --git a/src/theme.js b/src/theme.js
index 35dba32..305dcbb 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -187,6 +187,9 @@ const theme = {
         opacity: 0.5,
       },
     },
+    textarea: {
+      fontFamily: "body2",
+    },
   },
   buttons: {
     primary: {