Fixes #29106 - orderable select value

(cherry picked from commit 4683162)

webpack/assets/javascripts/react_app/components/common/forms/OrderableSelect/OrderableSelect.js

@@ -19,6 +19,7 @@ const OrderableSelect = ({
   defaultValue,
   value,
   options,
+  name,
   ...props
 }) => {
   const [internalValue, setInternalValue] = useInternalValue(
@@ -29,7 +30,7 @@ const OrderableSelect = ({
     setInternalValue(orderDragged(internalValue, dragIndex, hoverIndex));
   };
 
-  // hack the form-control, which in TypeAhead so it will be duplicated
+  // hack the form-control, which is already in TypeAhead so it would be duplicated
   const classesWithoutFormControl =
     className &&
     className
@@ -51,6 +52,7 @@ const OrderableSelect = ({
             moveDraggedOption={moveDraggedOption}
             {...tokenProps}
           />
+          {name && <input type="hidden" name={name} value={option.value} />}
         </div>
       )}
       {...props}
@@ -68,6 +70,7 @@ const OrderableSelect = ({
 OrderableSelect.propTypes = {
   options: PropTypes.arrayOf(PropTypes.object).isRequired,
   id: PropTypes.string.isRequired,
+  name: PropTypes.string,
   onChange: PropTypes.func,
   defaultValue: PropTypes.array,
   value: PropTypes.array,
@@ -78,6 +81,7 @@ OrderableSelect.defaultProps = {
   onChange: noop,
   defaultValue: [],
   value: null,
+  name: null,
   className: '',
 };
 

webpack/assets/javascripts/react_app/components/common/forms/OrderableSelect/__tests__/OrderableSelect.test.js

@@ -63,4 +63,22 @@ describe('OrderableSelect', () => {
     expect(selected[1].value).toBe('dnk');
     expect(selected[2].value).toBe('no');
   });
+
+  it('renders inputs if name given', () => {
+    const value = ['yes', 'no', 'dnk'];
+    const wrapper = mount(
+      <WrapedInTestContext
+        id="testOrderable"
+        options={yesNoOpts}
+        value={value}
+        name="uncertain_select[]"
+      />
+    );
+    const inputs = wrapper.find('input[type="hidden"]');
+    expect(inputs).toHaveLength(3);
+    inputs.forEach((input, idx) => {
+      expect(input.prop('value')).toBe(value[idx]);
+      expect(input.prop('name')).toBe('uncertain_select[]');
+    });
+  });
 });