NativeSelect label overlaps initial value

[tuhlmann]

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

I'm using the latest 5.1.3 versions of react-md (form is 5.1.4). I'm using a <FormThemeProvider theme="underline"> around a Form that contains a <NativeSelect> component:

<NativeSelect
    id="category-select"
    name="search-category"
    label="Category"
    value={category?.name}
    onChange={...}
>
    <option>...</option>
</NativeSelect>

When the modal dialog loads and there is already a selected option (category?.name), then the label of the select element and the selected value overlap. After choosing another value from the dropdown, the style changes and the label appears above the value (which is correct).

What am I missing to do, so that the initial render of the component gets fixed?

Expected behavior A clear and concise description of what you expected to
happen.

Label should be above initial or selected value.

Screenshots If applicable, add screenshots to help explain your problem.

When there is a selected value to show, it looks like this when the modal opens:

Once I select a different value, the layout is correct:

Desktop (please complete the following information):

• MacOS Mojave
• latest MS Edge, latest Chrome

Smartphone (please complete the following information):

not tested in mobile devices

Additional context Add any other context about the problem here.

[tuhlmann]

I have found the problem. I did not correctly set the selected value on load. Problem is solved.