I'm currently utilizing React-Bootstrap (version 1.0.0).
While adding validation to forms works smoothly, it seems to have compatibility issues with Select dropdowns:
What is the solution for this issue? Is the only recourse to manually apply CSS in order to adjust the position of the validation icons on the Controls?
Sample 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>