Fix drop down selection

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

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"

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
+      }}
+    />
+  ));

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>
             );