handle submit key press on mac osx

scm-ui/ui-components/src/forms/Textarea.stories.tsx

@@ -0,0 +1,56 @@
+import React, {useState} from "react";
+import { storiesOf } from "@storybook/react";
+import styled from "styled-components";
+import Textarea from "./Textarea";
+
+const Spacing = styled.div`
+  padding: 2em;
+`;
+
+const OnChangeTextarea = () => {
+  const [value, setValue] = useState("Start typing");
+  return (
+    <Spacing>
+      <Textarea value={value} onChange={v => setValue(v)} />
+      <hr />
+      <p>{value}</p>
+    </Spacing>
+  );
+};
+
+const OnSubmitTextare = () => {
+  const [value, setValue] = useState("Use the ctrl/command + Enter to submit the textarea");
+  const [submitted, setSubmitted] = useState("");
+
+  const submit = () => {
+    setSubmitted(value);
+    setValue("");
+  };
+
+  return (
+    <Spacing>
+      <Textarea value={value} onChange={v => setValue(v)} onSubmit={submit} />
+      <hr />
+      <p>{submitted}</p>
+    </Spacing>
+  );
+};
+
+const OnCancelTextare = () => {
+  const [value, setValue] = useState("Use the escape key to clear the textarea");
+
+  const cancel = () => {
+    setValue("");
+  };
+
+  return (
+    <Spacing>
+      <Textarea value={value} onChange={v => setValue(v)} onCancel={cancel} />
+    </Spacing>
+  );
+};
+
+storiesOf("Forms|Textarea", module)
+  .add("OnChange", () => <OnChangeTextarea />)
+  .add("OnSubmit", () => <OnSubmitTextare />)
+  .add("OnCancel", () => <OnCancelTextare />);

scm-ui/ui-components/src/forms/Textarea.tsx

@@ -27,17 +27,16 @@ class Textarea extends React.Component<Props> {
     this.props.onChange(event.target.value, this.props.name);
   };
 
-  onKeyPress = (event: KeyboardEvent<HTMLTextAreaElement>) => {
-    const { onSubmit } = this.props;
-    if (onSubmit && event.key === "Enter" && event.ctrlKey) {
-      onSubmit();
-    }
-  };
-
   onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
     const { onCancel } = this.props;
     if (onCancel && event.key === "Escape") {
       onCancel();
+      return;
+    }
+
+    const { onSubmit } = this.props;
+    if (onSubmit && event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+      onSubmit();
     }
   };
 
@@ -57,7 +56,6 @@ class Textarea extends React.Component<Props> {
             onChange={this.handleInput}
             value={value}
             disabled={!!disabled}
-            onKeyPress={this.onKeyPress}
             onKeyDown={this.onKeyDown}
           />
         </div>