How to make Select menu location relative to controller button in React? - css

Question

I want to implement a <Select /> component with two features.
I want to hide the form control. As shown in Fig. 1. I am currently accomplishing this by using display: 'none'. CodeSandbox Demo
I want to make the select menu appear directly under the button that opens the menu. As shown in Fig. 2. Currently, it seems to be positioned absolutely in the upper left of the window. CodeSandbox Demo
How can I accomplish both of these features? (A code sandbox demo of your answer would be most helpful.)
Fig. 1. Form control is hidden
https://codesandbox.io/s/j7xr2wmw7v
import React from "react";
import PropTypes from "prop-types";
import { 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 Button from "#material-ui/core/Button";
const styles = theme => ({
button: {
display: "block",
marginTop: theme.spacing.unit * 30
},
formControl: {
margin: theme.spacing.unit,
minWidth: 120,
display: "none"
}
});
class ControlledOpenSelect extends React.Component {
state = {
age: "",
open: false
};
handleChange = event => {
this.setState({ [event.target.name]: event.target.value });
};
handleClose = () => {
this.setState({ open: false });
};
handleOpen = () => {
this.setState({ open: true });
};
render() {
const { classes } = this.props;
return (
<form autoComplete="off">
<Button className={classes.button} onClick={this.handleOpen}>
Open the select
</Button>
<FormControl hidden className={classes.formControl}>
<InputLabel htmlFor="demo-controlled-open-select">Age</InputLabel>
<Select
open={this.state.open}
onClose={this.handleClose}
onOpen={this.handleOpen}
value={this.state.age}
onChange={this.handleChange}
inputProps={{
name: "age",
id: "demo-controlled-open-select"
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</form>
);
}
}
ControlledOpenSelect.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(ControlledOpenSelect);
Fig. 2. Dropdown select menu appears directly beneath button
https://codesandbox.io/s/l4k8p7zxjq
import React from 'react';
import PropTypes from 'prop-types';
import { 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 Button from '#material-ui/core/Button';
const styles = theme => ({
button: {
display: 'block',
marginTop: theme.spacing.unit * 2,
},
formControl: {
margin: theme.spacing.unit,
minWidth: 120,
},
});
class ControlledOpenSelect extends React.Component {
state = {
age: '',
open: false,
};
handleChange = event => {
this.setState({ [event.target.name]: event.target.value });
};
handleClose = () => {
this.setState({ open: false });
};
handleOpen = () => {
this.setState({ open: true });
};
render() {
const { classes } = this.props;
return (
<form autoComplete="off">
<Button className={classes.button} onClick={this.handleOpen}>
Open the select
</Button>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="demo-controlled-open-select">Age</InputLabel>
<Select
open={this.state.open}
onClose={this.handleClose}
onOpen={this.handleOpen}
value={this.state.age}
onChange={this.handleChange}
inputProps={{
name: 'age',
id: 'demo-controlled-open-select',
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</form>
);
}
}
ControlledOpenSelect.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ControlledOpenSelect);

Answer 1

instead of
display: "none"
try
visibility: "hidden",
width:'0',
height:'0'
this will leave the container element in place and allow the dropdown to appear in the correct position