Responsive React Select with custom user input built with Bootstrap 5. Click on the Other option to input a custom value into the select.
Check out React Bootstrap Select With Custom Input Documentation for detailed instructions & even more examples.
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { MDBContainer, MDBInput, MDBSelect } from "mdb-react-ui-kit"; export default function App() { const data = useMemo( () => [ { text: "One", value: 1 }, { text: "Two", value: 2 }, { text: "Three", value: 3 }, { text: "Four", value: 4 }, { text: "Other", value: 5 }, ], [] ); const [currentValue, setCurrentValue] = useState(data[0]); const [inputActive, setInputActive] = useState(false); const otherInputEl = useRef(null); const inputOnBlur = useCallback((e) => { if (!e.target.value) { setInputActive(false); setCurrentValue(data[data.length - 1]) } }, []); useEffect(() => { console.log(currentValue); const lastIndex = data.length - 1; if (currentValue.value == data[lastIndex].value) { setInputActive(true); setTimeout(() => { otherInputEl.current?.focus(); }); } else { setInputActive(false); } }, [currentValue]); return ( <MDBContainer style={{ width: "300px" }} className="mt-5"> {inputActive ? ( <MDBInput onBlur={inputOnBlur} inputRef={otherInputEl} label="Other" id="form1" type="text" /> ) : ( <MDBSelect onValueChange={(e) => setCurrentValue(e)} label="Example label" data={data} /> )} </MDBContainer> ); }-
Download MDB React - free UI KIT
-
Choose your favourite customized component and click on the image
-
Copy & paste the code into your MDB project