How to create a select component with placeholder in React

#javascript #react #nextjs

Suppose you want a select component with a placeholder that will not be displayed in the options list as we normally make the first option the placeholder by making its value = "none" when user selects it we know they didn't select a thing.

Let's hide it, let's not show it in the options list at all.

Here is how

We do what we normally do i.e add the first option with value = "none" but only display it only on some conditions.

When user focuses the select (onFocus), we hide it from the options list by applying css display: none
When user closes the select (onClose), we check if he selected any option, so if e.target.value === undefined, we know they didn't select a thing so we show the first option (placeholder).

Select.js

import React, { useState } from 'react';
import clsx from 'clsx';
import Select from '@material-ui/core/Select';
import grey from '@material-ui/core/colors/grey';
import MenuItem from '@material-ui/core/MenuItem';
import InputBase from '@material-ui/core/InputBase';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles( theme => ({
  container: {
    width: "100%",
    height: "100vh",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
  select: {
    height: 36,
    width: 320,
    outline: 'none',
    cursor: 'pointer',
    textAlign: 'left',
    paddingLeft: theme.spacing(1),
    paddingRight: theme.spacing(1),
    border: `1px solid ${grey[300]}`,
    color: theme.palette.common.black,
    backgroundColor: theme.palette.common.white,
  },
  selectdisabled: {
    color: grey[500],
  },
  menuitem: {
    direction: "rtl",
  },
  menuitemhidden: {
    display: "none"
  },
})); 

const PlaceholderSelect = () => {
    const classes = useStyles();
    const [value, setValue] = useState("none");
    const [showPlaceholder, setShowPlaceholder] = useState(value === "none");
    return (
        <div className={classes.container} >
            <Select
                value={value}
                defaultValue="none"
                input={<InputBase />}
                onChange={(e) => setValue(e.target.value)}
                onFocus={(e) => setShowPlaceholder(false)}
                onClose={(e) => setShowPlaceholder(e.target.value === undefined)}
                className={clsx(classes.select, value === "none" ? classes.selectdisabled : null)}
            >
                <MenuItem className={clsx(classes.menuitem, !showPlaceholder ? classes.menuitemhidden : null)} key="0" disabled value="none" >Select No.</MenuItem>
                <MenuItem className={classes.menuitem} key="1" value="1" >1</MenuItem>
                <MenuItem className={classes.menuitem} key="2" value="2" >2</MenuItem>
                <MenuItem className={classes.menuitem} key="3" value="3" >3</MenuItem>
            </Select>
        </div>
    );
}

export default PlaceholderSelect;