CODEWITHSUNDEEP
reactjs
karthi
karthi

Reputation: 201

Close dropdown in React JS

<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

Upvotes: 1

Views: 859

Answers (2)

Sanka Sanjeeva
Sanka Sanjeeva

Reputation: 3520

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;

Upvotes: 1

kannanfa
kannanfa

Reputation: 100

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

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

Upvotes: 0

Related Questions