React-bootstrap FormControl Select placeholder

Question

Trying to set up a control for a select field but even with placeholder set it still always auto selects the first item in the list.

It looks like this...

export function renderSelector({input, label, placeholder, meta:{touched, warning, error}, title, mandatory, fieldValues, fieldItemKeyFunc, fieldItemLabelFunc, props}) {


 const mappedData = fieldValues.map(v => ({Id: fieldItemKeyFunc(v), Name: fieldItemLabelFunc(v)}));
    let custom = props || {};
    return (
        <FormGroup controlId={input.name} validationState={touched && error ? 'error' : null}>
            <Col xs={12}>
                {renderLabel(title, label, mandatory)}
            </Col>
            <Col xs={12}>
                <FormControl componentClass="select" placeholder={placeholder} name={input.name} {...input} {...custom}>
                    {
                        mappedData.map((item, index) => {
                            return (
                                <option key={index} value={item.Id}>{item.Name}</option>
                            )
                        })
                    }
                </FormControl>
                <FormControl.Feedback/>
                {renderErrBlock(touched, warning, error)}
            </Col>
        </FormGroup>
    );

}

When this renders the selector always starts with the first item selected, instead of the placeholder. How can I fix this?? I tried just adding a default first option and adjusting the css, but for Accessibility that doesn't work that well because the contrast levels

Answer 1

A bit late, but check if adding this option helps you:

<option key='blankChoice' hidden value />

Make sure to check the form value to a blank choice as well:

<Form.Control
    value=''
>

Answer 2

You can do something like this:

Add a

<option disabled value={-1} key={-1}>

, and set your

<FormControl value={-1} ...

for a similar effect.