After modifying the BootstrapInput code snippet to the following:
<BootstrapInput
id="age-customized-input"
placeholder="Search Title"
/>
I noticed that the placeholder text only appears when the input field is activated.
Does anyone know how to keep the placeholder text visible at all times?
The code snippet I'm referring to is from the Material-UI example below.
import React from 'react';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import NativeSelect from '@material-ui/core/NativeSelect';
import InputBase from '@material-ui/core/InputBase';
const BootstrapInput = withStyles(theme => ({
root: {
'label + &': {
marginTop: theme.spacing(3),
},
},
input: {
borderRadius: 4,
position: 'relative',
backgroundColor: theme.palette.background.paper,
border: '1px solid #ced4da',
fontSize: 16,
width: 'auto',
padding: '10px 26px 10px 12px',
transition: theme.transitions.create(['border-color', 'box-shadow']),
// Use the system font instead of the default Roboto font.
fontFamily: [
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(','),
'&:focus': {
borderRadius: 4,
borderColor: '#80bdff',
boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
},
},
}))(InputBase);
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
flexWrap: 'wrap',
},
margin: {
margin: theme.spacing(1),
},
}));
export default function CustomizedSelects() {
const classes = useStyles();
const [age, setAge] = React.useState('');
const handleChange = event => {
setAge(event.target.value);
};
return (
<form className={classes.root} autoComplete="off">
<FormControl className={classes.margin}>
<InputLabel htmlFor="age-customized-input">Age</InputLabel>
<BootstrapInput id="age-customized-input" />
</FormControl>
<FormControl className={classes.margin}>
<InputLabel htmlFor="age-customized-select">Age</InputLabel>
<Select
value={age}
onChange={handleChange}
input={<BootstrapInput name="age" id="age-customized-select" />}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
<FormControl className={classes.margin}>
<InputLabel htmlFor="age-customized-native-simple">Age</InputLabel>
<NativeSelect
value={age}
onChange={handleChange}
input={<BootstrapInput name="age" id="age-customized-native-simple" />}
>
<option value="" />
<option value={10}>Ten</option>
<option value={20}>Twenty</option>
<option value={30}>Thirty</option>
</NativeSelect>
</FormControl>
</form>
);
}