title: Use select in Semantic UI with Formik
body: <p>I'm usign <a href="https://www.npmjs.com/package/formik" rel="nofollow noreferrer">Formik</a> to validate some data fields with <a href="https://semantic-ui.com/introduction/getting-started.html" rel="nofollow noreferrer">Semantic UI</a> in React. It works fine with input fields but doesn't work with selectors.</p>
  <p>How it works with input fields:</p>
  <pre><code>    import { Formik, Form, Field } from 'formik';
      import { Input, Button, Select, Label, Grid } from 'semantic-ui-react';
      import * as Yup from 'yup';
  
      ...
  
    const initialValues = {
       name: ''
    };
    const requiredErrorMessage = 'This field is required';
    const validationSchema = Yup.object({ name: Yup.string().required(requiredErrorMessage) });
     
    &lt;Formik
    htmlFor=&quot;amazing&quot;
    initialValues={initialValues}
    validationSchema={validationSchema}
    onSubmit={values =&gt; this.handleSubmit(values)}&gt;
    {({ errors, touched }) =&gt; (
      &lt;Form id=&quot;amazing&quot;&gt;
        &lt;div&gt;
          &lt;CreationContentContainer&gt;
            &lt;Grid&gt;
              &lt;Grid.Column&gt;
                &lt;Label&gt;Company name&lt;/Label&gt;
                &lt;Field name=&quot;name&quot; as={Input} placeholder=&quot;name&quot; /&gt; // here is the input 
                &lt;div&gt;{touched.name &amp;&amp; errors.name ? errors.name : null}&lt;/div&gt;
              &lt;/Grid.Column&gt;
            &lt;/Grid&gt;
          &lt;/CreationContentContainer&gt;
          &lt;Button type=&quot;submit&quot; form=&quot;amazing&quot;&gt;
            Create company
          &lt;/Button&gt;
        &lt;/div&gt;
      &lt;/Form&gt;
    )}
  &lt;/Formik&gt;;
  </code></pre>
  <p>However, when the <code>as={Input}</code> is replaced by <code>as={Select}</code>, it doesn't work. The dropdown gets opened when I click on the selector, it shows the options (<code>company1</code> and <code>company2</code>), I click on one of them but it does not work -&gt; the value shown is still the placeholder value.</p>
  <pre><code>import { Formik, Form, Field } from 'formik';
  import { Input, Button, Select, Label, Grid } from 'semantic-ui-react';
  import * as Yup from 'yup';
  
  const companyOptions = [ // the select's options
    { text: 'company1', value: 'company1' },
    { text: 'company2', value: 'company2' },
  ];
  
  &lt;Formik
    htmlFor=&quot;amazing&quot;
    initialValues={initialValues}
    validationSchema={validationSchema}
    onSubmit={values =&gt; this.handleSubmit(values)}&gt;
    {({ errors, touched }) =&gt; (
      &lt;Form id=&quot;amazing&quot;&gt;
        &lt;div&gt;
          &lt;CreationContentContainer&gt;
            &lt;Grid&gt;
              &lt;Grid.Column&gt;
                &lt;Label&gt;Company name&lt;/Label&gt;
                &lt;Field
                  name=&quot;name&quot;
                  as={Select} // here is changed to Select
                  options={companyOptions} // the options
                  placeholder=&quot;name&quot;
                /&gt;
                &lt;div&gt;{touched.name &amp;&amp; errors.name ? errors.name : null}&lt;/div&gt;
              &lt;/Grid.Column&gt;
            &lt;/Grid&gt;
          &lt;/CreationContentContainer&gt;
          &lt;Button type=&quot;submit&quot; form=&quot;amazing&quot;&gt;
            Create company
          &lt;/Button&gt;
        &lt;/div&gt;
      &lt;/Form&gt;
    )}
  &lt;/Formik&gt;;
  </code></pre>