Change note text input to allow for multiline editing

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(
+      document.body.addEventListener("wheel", handleInteraction);
-        "wheel",
-        () => {
-          onRequestClose();
-        },
-        { once: true }
-      );
     }
 
     return () => {
       if (modalContentNode) {
-        document.body.removeEventListener("pointerdown", handlePointerDown);
+        document.body.removeEventListener("pointerdown", handleInteraction);
       }
     };
   }, [modalContentNode, excludeNode, onRequestClose]);

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

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);

src/theme.js

@@ -187,6 +187,9 @@ const theme = {
         opacity: 0.5,
       },
     },
+    textarea: {
+      fontFamily: "body2",
+    },
   },
   buttons: {
     primary: {