Add preselected value to options in DropDown.tsx if missing

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 - Repository names may not end with ".git" ([#1277](https://github.com/scm-manager/scm-manager/pull/1277))
+- Add preselected value to options in dropdown component if missing ([#1287](https://github.com/scm-manager/scm-manager/pull/1287))
 
 ## [2.3.1] - 2020-08-04
 ### Added

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -38608,6 +38608,42 @@ exports[`Storyshots Forms|Checkbox With HelpText 1`] = `
 </div>
 `;
 
+exports[`Storyshots Forms|DropDown Add preselect if missing in options 1`] = `
+<div
+  className="select"
+>
+  <select
+    onChange={[Function]}
+    value="D"
+  >
+    <option
+      selected={false}
+      value="alpha"
+    >
+      A
+    </option>
+    <option
+      selected={false}
+      value="beta"
+    >
+      B
+    </option>
+    <option
+      selected={false}
+      value="gamma"
+    >
+      C
+    </option>
+    <option
+      selected={true}
+      value="D"
+    >
+      D
+    </option>
+  </select>
+</div>
+`;
+
 exports[`Storyshots Forms|DropDown Default 1`] = `
 <div
   className="select"
@@ -38664,6 +38700,12 @@ exports[`Storyshots Forms|DropDown With Translation 1`] = `
     >
       The Meaning Of Liff
     </option>
+    <option
+      selected={true}
+      value="dirk"
+    >
+      dirk
+    </option>
   </select>
 </div>
 `;

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

@@ -48,4 +48,14 @@ storiesOf("Forms|DropDown", module)
         // nothing to do
       }}
     />
+  ))
+  .add("Add preselect if missing in options", () => (
+    <DropDown
+      optionValues={["alpha", "beta", "gamma"]}
+      options={["A", "B", "C"]}
+      preselectedOption={"D"}
+      optionSelected={selection => {
+        // nothing to do
+      }}
+    />
   ));

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

@@ -36,6 +36,11 @@ type Props = {
 class DropDown extends React.Component<Props> {
   render() {
     const { options, optionValues, preselectedOption, className, disabled } = this.props;
+
+    if (preselectedOption && options.filter(o => o === preselectedOption).length === 0) {
+      options.push(preselectedOption);
+    }
+
     return (
       <div className={classNames(className, "select", disabled ? "disabled" : "")}>
         <select value={preselectedOption ? preselectedOption : ""} onChange={this.change} disabled={disabled}>