Tengo un formulario que quiero que los usuarios completen. Tengo una serie de opciones entre las que pueden elegir, pero no quiero que ninguna de ellas sea la predeterminada. Me gustaría que el menú desplegable dijera algo como --Select-- . Luego, cuando los usuarios seleccionan el menú desplegable, ya no pueden seleccionar --Select-- .

Estoy usando formularios Redux y React-Bootstrap para la presentación. Vi algunas respuestas en Stack Overflow, dicen que configure la opción para deshabilitarla o agregarla como un grupo de opciones. Esto resuelve cómo se comporta cuando se abre el menú desplegable, pero elimina esa opción como opción predeterminada.

 let selectOptions = options.map((option, index) => { return ( <option key={index} value={option}> {option} </option> ); }) const {value, ...inputs} = input return ( <Aux> <Form.Label className="mb-1">{label}</Form.Label> {explanation && !readonly ? ( <OverlayTrigger trigger="click" key={"right"} placement={"right"} overlay={ <Popover id="popover-basic"> <Popover.Header as="h3">{label}</Popover.Header> <Popover.Body>{explanation}</Popover.Body> </Popover> } > <i className="material-icons text-info align-top ml-2 cursor">help</i> </OverlayTrigger> ) : null} <Form.Control className={`${formStyle} ${validationStyle} ${noValidationStyle}`} disabled={readonly} as="select" placeholder="select" {...input} isInvalid={(touched || attempt) && !!error} isValid={!error} > {selectOptions} </Form.Control> {(touched || attempt) && !!error && !readonly ? ( <Form.Control.Feedback type="invalid" className="animated fadeIn"> {error} </Form.Control.Feedback> ) : ( <span>{"\u00A0"}</span> )} </Aux>