with form

lib/Selection/stories/BasicUsage.js

@@ -3,11 +3,15 @@
  */
 
 import { useState } from 'react';
+import { Form, Field } from 'react-final-form';
 import faker from 'faker';
 import Selection from '../Selection';
 import Button from '../../Button';
 import { syncGenerate } from '../../MultiColumnList/stories/service';
 
+function validateRequired(value) {
+  return value ? undefined : 'Required';
+}
 
 const hugeOptionsList = syncGenerate(3000, 0, () => {
   const item = faker.address.city();
@@ -27,27 +31,48 @@ const countriesOptions = [
   // ...obviously there are more....
 ];
 
-export default () => {
+const initialValues = {};
+
+const BasicUsageStory = () => {
   const [value, setValue] = useState(null);
 
   const changeValue = (val) => {
     setValue(val);
   };
 
+  const onSubmit = () => console.log('submit');
+
   return (
-    <div>
-    <Button onClick={() => changeValue('MX')}>Set Value to MX (Mexico)</Button>
-    <Button onClick={() => changeValue('AU')}>Set Value to AU (Austrailia)</Button>
-    <p>value: { value ? value : 'null' }</p>
-      <Selection
-        name="SelectionCountry"
-        value={value}
-        onChange={(value) => {setValue(value)}}
-        label="Country"
-        id="countrySelect"
-        placeholder="Select country"
-        dataOptions={countriesOptions}
-      />
-    </div>
+    <Form
+      enableReinitialize
+      keepDirtyOnReinitialize
+      validateOnBlur
+      subscription={{
+        initialValues: true,
+        submitting: true,
+        pristine: true,
+        values: true,
+      }}
+      onSubmit={onSubmit}
+      initialValues={initialValues}
+      render={({ handleSubmit, form: { change } }) => (
+        <>
+          <Button onClick={() => change('SelectionCountry', 'MX')}>Set Value to MX (Mexico)</Button>
+
+          <Field
+            name="SelectionCountry"
+            dataOptions={countriesOptions}
+            fullWidth
+            component={Selection}
+            label="Country"
+            validate={validateRequired}
+          />
+
+          <Button type="Submit" onClick={handleSubmit}>Submit</Button>
+      </>
+    )}
+    />
   )
 };
+
+export default BasicUsageStory;

package.json

@@ -96,6 +96,7 @@
   },
   "dependencies": {
     "@csstools/postcss-global-data": "^2.1.1",
+    "@folio/stripes-final-form": "^8.2.10990000000032",
     "@folio/stripes-react-hotkeys": "^3.2.1",
     "classnames": "^2.2.5",
     "currency-codes": "2.1.0",
@@ -113,6 +114,7 @@
     "prop-types": "^15.5.10",
     "prop-types-extra": "^1.1.0",
     "query-string": "^8.1.0",
+    "react-final-form": "^6.5.9",
     "react-highlight-words": "^0.20.0",
     "react-overlays": "^5.2.1",
     "react-quill": "^2.0.0",