I have some react code that should just render a select input when given a list. It renders and works fine, however I want to stop the dropdown menu from closing whenever the cursor leaves the list. It also closes when the cursor is moved too quickly within the list.
Here is the code that creates the input.
MyInput.js
class MyInput extends React.Component {
constructor(props) {
super(props)
this.setItem = this.setItem.bind(this)
}
const list = () => {
return [1, 2, 3].map((option) =>
<option key={option}>{option}</option>
)
}
setItem (event) {
const item = event.target.value
this.setState({ item })
}
render() {
const itemSelect =
<select value={this.state.item} onChange={event => this.setItem(event)}>
{list}
</select>
return (
<div>{itemSelect}</div>
)
}
}
styles.css
select:hover {
filter: brightness(50%);
}
This is present in Firefox and works fine in Chrome and IE11. How do I change it so it only closes when the mouse is clicked?
EDIT: This only occurs when the filter: brightness(50%)
style on the select:hover
is added to the css. CodeSandbox link is here: https://codesandbox.io/s/eager-brown-s4wum (credit to @levis in the comments).
setItem
function and yourlist
. Also where you are usingitemSelect
.