From 783aaf2b78e3f7882cf29b300c84082c11acd160 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Wed, 11 Dec 2019 21:52:11 +0100
Subject: [PATCH] handle submit key press on mac osx

---
 .../src/forms/Textarea.stories.tsx            | 56 +++++++++++++++++++
 scm-ui/ui-components/src/forms/Textarea.tsx   | 14 ++---
 2 files changed, 62 insertions(+), 8 deletions(-)
 create mode 100644 scm-ui/ui-components/src/forms/Textarea.stories.tsx

diff --git a/scm-ui/ui-components/src/forms/Textarea.stories.tsx b/scm-ui/ui-components/src/forms/Textarea.stories.tsx
new file mode 100644
index 0000000000..a27b2b738c
--- /dev/null
+++ b/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 />);
diff --git a/scm-ui/ui-components/src/forms/Textarea.tsx b/scm-ui/ui-components/src/forms/Textarea.tsx
index 694fcf50f0..90ae07b576 100644
--- a/scm-ui/ui-components/src/forms/Textarea.tsx
+++ b/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>