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

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

sedhal soni sedhal soni · Accepted Answer · 2020-12-25T14:32:47

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>
    )
}

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

1 Answers