Form.Select runs outside of Field

[davidhenley]

Steps

Use Form.Select inside Form.Group

Expected Result

For Form.Select not to run outside of Field

Actual Result

Form.Select runs outside of field, even on React Semantic-UI docs page

<Form>
        <Form.Group widths='equal'>
          <Form.Input label='First name' placeholder='First name' />
          <Form.Input label='Last name' placeholder='Last name' />
          <Form.Select label='Gender' options={options} placeholder='Gender' />
        </Form.Group>
</Form>

Version

0.77.1

[brianespinosa]

@davidhenley two things are going on here.

The first is that our docs should be updated so that the Dropdown component has a fluid prop applied to it. That is what's causing the dropdown to break out of the container. Once you apply fluid to Form.Select it fixes the breaking out.

The second issue is that the CSS from SUI is intended to target an <input /> as a direct child of .field instead of a div with .ui.input. When the div is present it ALSO requires the .fluid class. So adding the fluid prop to Form.Input will make these work as expected.

Our docs need to get updated to let you know that when using equal on a Form.Groupthat the components inside need to usefluid` props otherwise they will not flex to their containers properly.