summaryrefslogtreecommitdiff
path: root/extension/react-app/src/components/TextDialog.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'extension/react-app/src/components/TextDialog.tsx')
-rw-r--r--extension/react-app/src/components/TextDialog.tsx28
1 files changed, 26 insertions, 2 deletions
diff --git a/extension/react-app/src/components/TextDialog.tsx b/extension/react-app/src/components/TextDialog.tsx
index 167e12cf..31a385d5 100644
--- a/extension/react-app/src/components/TextDialog.tsx
+++ b/extension/react-app/src/components/TextDialog.tsx
@@ -1,5 +1,5 @@
// Write a component that displays a dialog box with a text field and a button.
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
import styled from "styled-components";
import { Button, buttonColor, secondaryDark, vscBackground } from ".";
@@ -28,6 +28,10 @@ const TextArea = styled.textarea`
padding: 8px;
outline: 1px solid black;
font-family: Arial, Helvetica, sans-serif;
+
+ &:focus {
+ outline: 1px solid orange;
+ }
`;
const P = styled.p`
@@ -38,19 +42,39 @@ const P = styled.p`
const TextDialog = (props: {
showDialog: boolean;
onEnter: (text: string) => void;
+ onClose: () => void;
}) => {
const [text, setText] = useState("");
const textAreaRef = React.createRef<HTMLTextAreaElement>();
+ useEffect(() => {
+ if (textAreaRef.current) {
+ textAreaRef.current.focus();
+ }
+ }, [props.showDialog]);
+
return (
<DialogContainer hidden={!props.showDialog}>
<Dialog>
<P>Thanks for your feedback. We'll get back to you soon!</P>
- <TextArea cols={50} rows={10} ref={textAreaRef}></TextArea>
+ <TextArea
+ cols={50}
+ rows={10}
+ ref={textAreaRef}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" && e.metaKey && textAreaRef.current) {
+ props.onEnter(textAreaRef.current.value);
+ setText("");
+ } else if (e.key === "Escape") {
+ props.onClose();
+ }
+ }}
+ />
<Button
onClick={() => {
if (textAreaRef.current) {
props.onEnter(textAreaRef.current.value);
+ setText("");
}
}}
>