When nesting <Select multiple inline> inside <FormField>, options have significant whitespace issues

Expected Behavior

A <Select multiple inline> component should render correctly when used inside a <FormField> component.

Actual Behavior

The <Select> options display with what looks like a huge amount of padding above each option (see screenshot / codepen).

What I think is actually happening is something like this:

1. Using <Select multiple inline> causes the options to be rendered using <Checkbox> internally.
2. The <Checkbox> component uses a zero-height, zero-width, zero-opacity <input type="checkbox">, and renders a nicer-looking checkbox with SVG. Essentially, the original input is hidden without explicitly using display: none.
3. Something in the <FormField> styles (probably this line) is explicitly setting a height for the <input>, which is intended to be “hidden”, breaking the layout of the <Checkbox>.

URL, screen shot, or Codepen exhibiting the issue

Codepen: https://codepen.io/ezzatron/pen/WXGoJe

Screenshot:

Steps to Reproduce

1. Nest a <Select inline multiple> with some options inside a <FormField>
2. Observe whitespace issues

Your Environment

• Grommet version: 1.8.3
• Browser Name and version: Chrome 61.0.3163.100, also Firefox
• Operating System and version (desktop or mobile): macOS Sierra

[ezzatron]

Thanks for the fix!

[dgennetten]

A temporary workaround: wrap the offending <Select> in a <Box>