0

I am combining react-select with Grommet and have the select inside a Grommet FormField component like this:

<FormField label="Country">
   <Select options={options}/>
</FormField>

On smaller screens, it works fine:

enter image description here

But on larger screens the select content is scroll-able inside the parent (FormField) container:

enter image description here

If I toggle position: absolute to off, then the select content displays outside the container, but resizes the whole form:

enter image description here

Any ideas on what else to check or try?

Community
  • 1
  • 1
D Durham
  • 1,243
  • 2
  • 20
  • 42
  • I would be careful with integrations like that. The color from that dropdown is not matching any of your brand colors. Is there any reason for not using the default select from the browser? Have you had a chance to test accessibility for react-select? – Alan Souza Sep 15 '16 at 23:53

1 Answers1

1

I had this same issue. What fixed it for me was setting the following on the Grommet UX FormField component.

overflow: inherit !important;

Ryan C.
  • 539
  • 1
  • 5
  • 7