Validation for Select elements of React-Bootstrap are mis-aligned

Question

I'm using React-Bootstrap (note: we're on the relatively new v1.0.0 !)

I can add validation to my forms rather nicely, but it doesn't play well with Select dropdowns:

How do I fix this? Is the only option to figure what manual css to layer onto the Controls, to re-locate the validation icons?

Code:

  <Form validated>
    <Form.Group>
      <Form.Label>Text Input</Form.Label>
      <Form.Control required type="text" value="foo"/>
    </Form.Group>
    <Form.Group>
      <Form.Label>Invalid Dropdown Input</Form.Label>
      <Form.Control required as="select" value={''}>
        <option key={'empty'} value={''}>...</option>
        <option key={'1'} value={'1'}>1</option>
        <option key={'2'} value={'2'}>2</option>
      </Form.Control>
    </Form.Group>
    <Form.Group>
      <Form.Label>Valid Dropdown Input</Form.Label>
      <Form.Control required as="select" value={'2'}>
        <option key={'empty'} value={''}>...</option>
        <option key={'1'} value={'1'}>1</option>
        <option key={'2'} value={'2'}>2</option>
      </Form.Control>
    </Form.Group>
  </Form>

Answer 1

Alternatively you can add custom attr to Form.Control

Please find below code snippet for your reference

Notice custom attr in <Form.Control required as="select" custom>

<Form.Control required as="select" custom>
   <option value="">...</option>
</Form.Control>