Change note text input to allow for multiline editing
This commit is contained in:
parent
61b4c8abc3
commit
7281e9b9ba
@ -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]);
|
||||
|
@ -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
|
||||
|
@ -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);
|
||||
|
@ -187,6 +187,9 @@ const theme = {
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
textarea: {
|
||||
fontFamily: "body2",
|
||||
},
|
||||
},
|
||||
buttons: {
|
||||
primary: {
|
||||
|
Loading…
x
Reference in New Issue
Block a user