How to use material-ui inputBase to make select component? - reactjs

Question

I would like to make select dropdown using by InputBase component. The select box shows correctly, but dropdown options doesn't show when I click the field. I had tried other inputComponent like input, it's work fine.
I want the label above on the field and I know that I can use native select to make this. However, I want to share same styles between these components.
Does anyone know how to use input base to make select component?
The code provided below:
import React from "react";
import "./styles.css";
import {
FormControl,
InputLabel,
InputBase,
MenuItem
} from "#material-ui/core";
import { withStyles, fade } from "#material-ui/core/styles";
export default function App() {
const BootstrapInput = withStyles((theme) => ({
root: {
"label + &": {
marginTop: "20px"
}
},
input: {
position: "relative",
backgroundColor: theme.palette.common.white,
border: "1px solid #ccc",
fontSize: 14,
width: "380px",
height: "12px",
padding: "10px 12px",
transition: theme.transitions.create(["border-color", "box-shadow"]),
"&:focus": {
boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
borderColor: theme.palette.primary.main
}
}
}))(InputBase);
return (
<div className="App">
<FormControl>
<InputLabel shrink htmlFor="personalTitle">
Age
</InputLabel>
<BootstrapInput inputComponent="select" name="personalTitle">
<MenuItem>20</MenuItem>
<MenuItem>30</MenuItem>
<MenuItem>40</MenuItem>
</BootstrapInput>
</FormControl>
</div>
);
}
CodeSandbox link:
https://codesandbox.io/s/select-on-inputbase-0ufes?file=/src/App.js:0-1209

Answer 1

You Can use material-ui select component to manage select box easily. You can check more details using below link
https://material-ui.com/components/selects/
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import InputLabel from '#material-ui/core/InputLabel';
import MenuItem from '#material-ui/core/MenuItem';
import FormHelperText from '#material-ui/core/FormHelperText';
import FormControl from '#material-ui/core/FormControl';
import Select from '#material-ui/core/Select';
const useStyles = makeStyles((theme) => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
}));
export default function SimpleSelect() {
const classes = useStyles();
const [age, setAge] = React.useState('');
const handleChange = (event) => {
setAge(event.target.value);
};
return (
<div>
<FormControl className={classes.formControl}>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
)
}