From 005ca83799cb2255eafe1b2d902d813e82888057 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Pfeuffer?= <rene.pfeuffer@cloudogu.com>
Date: Tue, 10 Mar 2020 10:51:15 +0100
Subject: [PATCH] Fix drop down selection

---
 CHANGELOG.md                                  |  1 +
 .../src/__snapshots__/storyshots.test.ts.snap | 60 +++++++++++++++++++
 .../src/forms/DropDown.stories.tsx            | 28 +++++++++
 scm-ui/ui-components/src/forms/DropDown.tsx   | 11 +---
 4 files changed, 92 insertions(+), 8 deletions(-)
 create mode 100644 scm-ui/ui-components/src/forms/DropDown.stories.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 15720de4e4..4a79f98df5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Modification for mercurial repositories with enabled XSRF protection
 - Does not throw NullPointerException when merge fails without normal merge conflicts
 - Keep file attributes on modification
+- Drop Down Component works again with translations
 
 ### Removed
 - Enunciate rest documentation
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 790c2cdc94..0df9e311c8 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -32263,6 +32263,66 @@ exports[`Storyshots Forms|Checkbox Disabled 1`] = `
 </div>
 `;
 
+exports[`Storyshots Forms|DropDown Default 1`] = `
+<div
+  className="select"
+>
+  <select
+    onChange={[Function]}
+    value="de"
+  >
+    <option
+      selected={false}
+      value="en"
+    >
+      en
+    </option>
+    <option
+      selected={true}
+      value="de"
+    >
+      de
+    </option>
+    <option
+      selected={false}
+      value="es"
+    >
+      es
+    </option>
+  </select>
+</div>
+`;
+
+exports[`Storyshots Forms|DropDown With Translation 1`] = `
+<div
+  className="select"
+>
+  <select
+    onChange={[Function]}
+    value="dirk"
+  >
+    <option
+      selected={false}
+      value="hg2g"
+    >
+      The Hitchhiker's Guide to the Galaxy
+    </option>
+    <option
+      selected={true}
+      value="dirk"
+    >
+      Dirk Gently’s Holistic Detective Agency
+    </option>
+    <option
+      selected={false}
+      value="liff"
+    >
+      The Meaning Of Liff
+    </option>
+  </select>
+</div>
+`;
+
 exports[`Storyshots Forms|Radio Default 1`] = `
 <div
   className="sc-cJSrbW hLoADP"
diff --git a/scm-ui/ui-components/src/forms/DropDown.stories.tsx b/scm-ui/ui-components/src/forms/DropDown.stories.tsx
new file mode 100644
index 0000000000..c2f2adae40
--- /dev/null
+++ b/scm-ui/ui-components/src/forms/DropDown.stories.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import DropDown from "./DropDown";
+
+storiesOf("Forms|DropDown", module)
+  .add("Default", () => (
+    <DropDown
+      options={["en", "de", "es"]}
+      preselectedOption={"de"}
+      optionSelected={() => {
+        // nothing to do
+      }}
+    />
+  ))
+  .add("With Translation", () => (
+    <DropDown
+      optionValues={["hg2g", "dirk", "liff"]}
+      options={[
+        "The Hitchhiker's Guide to the Galaxy",
+        "Dirk Gently’s Holistic Detective Agency",
+        "The Meaning Of Liff"
+      ]}
+      preselectedOption={"dirk"}
+      optionSelected={selection => {
+        // nothing to do
+      }}
+    />
+  ));
diff --git a/scm-ui/ui-components/src/forms/DropDown.tsx b/scm-ui/ui-components/src/forms/DropDown.tsx
index dac9af2880..9b495a9c1d 100644
--- a/scm-ui/ui-components/src/forms/DropDown.tsx
+++ b/scm-ui/ui-components/src/forms/DropDown.tsx
@@ -6,25 +6,20 @@ type Props = {
   optionValues?: string[];
   optionSelected: (p: string) => void;
   preselectedOption?: string;
-  className: string;
+  className?: string;
   disabled?: boolean;
 };
 
 class DropDown extends React.Component<Props> {
   render() {
     const { options, optionValues, preselectedOption, className, disabled } = this.props;
-
-    if (preselectedOption && !options.includes(preselectedOption)) {
-      options.unshift(preselectedOption);
-    }
-
     return (
       <div className={classNames(className, "select", disabled ? "disabled" : "")}>
         <select value={preselectedOption ? preselectedOption : ""} onChange={this.change} disabled={disabled}>
-          <option key={preselectedOption} />
           {options.map((option, index) => {
+            const value = optionValues && optionValues[index] ? optionValues[index] : option;
             return (
-              <option key={option} value={optionValues && optionValues[index] ? optionValues[index] : option}>
+              <option key={value} value={value} selected={value === preselectedOption}>
                 {option}
               </option>
             );