0

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

7
  • Provide more code. How and where you have added react? Your setItem function and your list. Also where you are using itemSelect. Aug 21, 2019 at 2:18
  • @ravibagul91 I didn't think it was a React thing so left most of it out. I have added it now just in case.
    – jarthur
    Aug 21, 2019 at 2:34
  • 1
    I fixed the code you posted to make it run on CodeSandbox and tested it on firefox and it works just fine. codesandbox.io/s/cocky-dhawan-kl6ki Are you missing something in the code you posted? if not then your problem is not react related. Maybe CSS? another JS library?
    – levis
    Aug 21, 2019 at 2:59
  • Thanks @levis, that's working for me too. I did leave a few things out (such as css) to minimise the code. Although I don't know the issue yet, I'll dig through and post back when I find it. Cheers.
    – jarthur
    Aug 21, 2019 at 3:32
  • 1
    @jarthur you need to set the brightness to 100% when the select has no pseudo-class applied. I've updated my codesandbox, have a look
    – levis
    Aug 21, 2019 at 4:16

1 Answer 1

1

I'm not sure if it's a bug on Firefox or that mixing pseudo classes and functions are just a bad idea but adding 100% of brightness to the element fixes it.

select{
  filter: brightness(100%);
}

select:hover {
  filter: brightness(50%);
}

CodeSandbox working: https://codesandbox.io/s/cocky-dhawan-kl6ki

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.