polishing

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("");
             }
           }}
         >