Fix UI issue

theopensystemslab · Dec 11, 2024 · d91ce15 · d91ce15
1 parent 688bff6
commit d91ce15
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 18 deletions.
diff --git a/editor.planx.uk/src/@planx/components/Question/OptionsEditor.tsx b/editor.planx.uk/src/@planx/components/Question/OptionsEditor.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import Input from "ui/shared/Input/Input";
 
 import {
   BaseOptionsEditor,
@@ -16,22 +15,8 @@ const QuestionOptionsEditor: React.FC<BaseOptionsEditorProps> = ({
       value={value}
       onChange={onChange}
       showValueField={showValueField}
-    >
-      <Input
-        value={value.data.description || ""}
-        placeholder="Description"
-        multiline
-        onChange={(ev) =>
-          onChange({
-            ...value,
-            data: {
-              ...value.data,
-              description: ev.target.value,
-            },
-          })
-        }
-      />
-    </BaseOptionsEditor>
+      showDescriptionField={true}
+    />
   );
 };
 

diff --git a/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx b/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx
@@ -10,6 +10,7 @@ import { FlagsSelect } from "./FlagsSelect";
 export interface BaseOptionsEditorProps {
   value: Option;
   showValueField?: boolean;
+  showDescriptionField?: boolean;
   onChange: (newVal: Option) => void;
   children?: ReactNode;
 }
@@ -50,8 +51,26 @@ export const BaseOptionsEditor: React.FC<BaseOptionsEditorProps> = (props) => (
           });
         }}
       />
+      {props.children}
     </InputRow>
-    {props.children && <InputRow>{props.children}</InputRow>}
+    {props.showDescriptionField && (
+      <InputRow>
+        <Input
+          value={props.value.data.description || ""}
+          placeholder="Description"
+          multiline
+          onChange={(ev) =>
+            props.onChange({
+              ...props.value,
+              data: {
+                ...props.value.data,
+                description: ev.target.value,
+              },
+            })
+          }
+        />
+      </InputRow>
+    )}
     {props.showValueField && (
       <InputRow>
         <Input