Close dropdown in React JS

Question

<select open={false} autoFocus={true} onClick={this.handleClick} size={5}>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

I have made a dropdown, but I cannot close it. I do not want close it with display:none

You have set the size to 5. So every time dropdown list shows 5 items. If you want to close it after selecting one, you can dynamically set it to 1. — Sanka Sanjeeva
– Sanka Sanjeeva, Commented Dec 28, 2021 at 14:58

Sanka Sanjeeva · Accepted Answer · 2021-12-28 15:39:09Z

1

You can initially show 5 items and, after selecting close it(set to 1 using a state)

import React, { useState } from "react";

function App() {
  const [defaultSize, setDefaultSize] = useState(5);

  const handleClick = () => {
    setDefaultSize(1);

    // do other stuff
  }

  return (
    <div>
      <select open={false} autoFocus={true} onClick={handleClick} size={defaultSize}>
        <option value="grapefruit">Grapefruit</option>
        <option value="lime">Lime</option>
        <option value="coconut">Coconut</option>
        <option value="mango">Mango</option>
      </select>
    </div>
  );
}

export default App;

answered Dec 28, 2021 at 15:39

Sanka Sanjeeva

3,86830 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kannanfa · Accepted Answer · 2021-12-28 15:01:05Z

0

Remove the size attribute. change onClick to onChange add value attribute for select tag

 <select value={myCar} onChange={handleChange}>

answered Dec 28, 2021 at 15:01

kannanfa

961 silver badge10 bronze badges

1 Comment

karthi Over a year ago

i use size attribute to open drop down default. i am looking for solution with size attribute

Collectives™ on Stack Overflow

Close dropdown in React JS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related