fix: Forward input refs, add missing form export, remove autogrow shadow element from tab order

src/Form/EasyInput.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { Context } from './Formbot';
 
 /**
@@ -8,7 +8,7 @@ import { Context } from './Formbot';
  */
 const PureInput = React.memo(({ Component, ...props }) => <Component {...props} />);
 
-function EasyInput({ name, Component, ...props  }) {
+function EasyInput({ name, Component, ...props }) {
   const state = useContext(Context);
 
   if (!state) {
@@ -34,6 +34,8 @@ function EasyInput({ name, Component, ...props  }) {
   );
 }
 
-export const createEasyInput = Component => props => <EasyInput Component={Component} {...props} />
+export const createEasyInput = Component =>
+  forwardRef((props, ref) =>
+    <EasyInput Component={Component} forwardedRef={ref} {...props} />);
 
 export default EasyInput;

src/Form/Formbot.example.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, createRef } from 'react';
 import Input from './Input';
 import Select from './Select';
 import Formbot, { Context } from './Formbot';
@@ -47,68 +47,78 @@ const Values = () => {
   )
 }
 
-export default function() {
-  return (
-    <Formbot
-      validations={{
-        name: val => {
-          if (val !== 'Bob') {
-            throw new Error('Your name must be Bob');
-          }
-        },
-        email: {
-          required: true,
-        },
-        gender: {
-          required: true,
-        },
-        message: {
-          required: true,
-        },
-        checkboxes: {
-          required: true,
-        },
-        radioGroup: {
-          required: true,
-        },
-        switch1: {
-          required: true,
-        },
-      }}>
-      <Form>
-        <Fieldset legend="A Group of Inputs">
-          <Input name="name" placeholder="Name" label="Name" />
-          <Input name="email" placeholder="Email" label="Email" />
+export default class FormbotExample extends React.Component {
+  nameRef = createRef();
+
+  componentDidMount() {
+    this.nameRef.current.focus();
+  }
+
+  render() {
+    return (
+      <Formbot
+        validations={{
+          name: val => {
+            if (val !== 'Bob') {
+              throw new Error('Your name must be Bob');
+            }
+          },
+          email: {
+            required: true,
+          },
+          gender: {
+            required: true,
+          },
+          message: {
+            required: true,
+          },
+          checkboxes: {
+            required: true,
+          },
+          radioGroup: {
+            required: true,
+          },
+          switch1: {
+            required: true,
+          },
+        }}>
+        <Form>
+          <Fieldset legend="A Group of Inputs">
+            <Input name="name" placeholder="Name (should autofocus)" label="Name" ref={this.nameRef} />
+            <Input name="email" placeholder="Email" label="Email" />
+
+            <Select
+              name="gender"
+              placeholder="Select a Gender"
+              label="Gender"
+              options={selectValues}
+            />
+          </Fieldset>
 
-          <Select
-            name="gender"
-            placeholder="Select a Gender"
-            label="Gender"
-            options={selectValues}
-          />
-        </Fieldset>
+          <Fieldset legend="Another Group of Inputs">
+            <Input
+              name="message"
+              multiline
+              size="md"
+              autogrow
+              placeholder="Your Message"
+              label="Write a Message"
+            />
 
-        <Fieldset legend="Another Group of Inputs">
-          <Input
-            name="message"
-            multiline
-            size="md"
-            autogrow
-            placeholder="Your Message"
-            label="Write a Message"
-          />
+            <Input name="favorite_word" placeholder="Favorite Word" label="Favorite Word" />
 
-          <CheckboxGroup name="checkboxes" choices={checkboxValues} />
-          <RadioGroup name="radioGroup" horizontal choices={radioValues} />
-          <Switch name="switch1" />
-        </Fieldset>
+            <CheckboxGroup name="checkboxes" choices={checkboxValues} />
+            <RadioGroup name="radioGroup" horizontal choices={radioValues} />
+            <Switch name="switch1" />
+          </Fieldset>
 
-        <Button htmlType="submit" type="primary" size="sm">
-          Submit
-        </Button>
+          <Button htmlType="submit" type="primary" size="sm">
+            Submit
+          </Button>
 
-        <Values />
-      </Form>
-    </Formbot>
-  );
+          <Values />
+        </Form>
+      </Formbot>
+    );
+  }
 }

src/Form/Input.js

@@ -60,6 +60,9 @@ const AutogrowShadow = createComponent({
     position: absolute;
     left: -9999px;
   `,
+  props: () => ({
+    tabIndex: -1,
+  }),
 });
 
 const validateValueProp = (props, propName, componentName) => {
@@ -91,7 +94,7 @@ class Input extends Component {
     autogrow: PropTypes.bool,
     size: PropTypes.string,
     floating: PropTypes.bool,
-    ref: PropTypes.shape(),
+    forwardedRef: PropTypes.shape(),
   };
 
   static defaultProps = {
@@ -127,7 +130,7 @@ class Input extends Component {
   inputRef = React.createRef();
 
   get ref() {
-    return this.props.ref || this.inputRef;
+    return this.props.forwardedRef || this.inputRef;
   }
 
   componentDidMount() {

src/index.js

@@ -14,6 +14,7 @@ export Dropdown from './Dropdown';
 export Field from './Form/Field';
 export Fieldset from './Form/Fieldset';
 export Flex from './Flex';
+export Form from './Form/Form';
 export Formbot from './Form/Formbot';
 export FormError from './Form/FormError';
 export FormGroup from './Form/FormGroup';