How to display a dropdown options when clicking in a button?

Question

I need to display the dropdown options of a select when I click on a button.

I tried with the ref and focus or click but it's not working.


import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [value, setValue] = React.useState(false);
  const selectRef = React.useRef();
  const handleClick = () => {
    // selectRef.current.focus();
    selectRef.current.click();
  };
  return (
    <div className="App">
      <button onClick={handleClick}>click me !</button>
      <select
        open
        ref={selectRef}
        value={value ? "activate" : "deactivate"}
        onChange={e => setValue(e.target.value === "activate")}
      >
        <option value="activate">Activate</option>
        <option value="deactivate">Deactivate</option>
      </select>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

I need when I click on the button the select show me the dropdown options

You will not be able to accomplish this with a standard `select`. You will need to create your own custom UI list. — Scott Marcus, Jun 18 '19 at 17:47
Take a look at [Styled Components](https://www.styled-components.com/docs/basics) ! You will not regret it. — cbdeveloper, Jun 19 '19 at 11:18

score 0 · Answer 1 · answered Jun 18 '19 at 17:55

0

I recommend you to see the below link. I think that's what which you are looking for: https://medium.com/@wwayne_me/how-to-manually-open-select-in-react-1169967eb33b

In summary it talks about an attribute named size which with setting it to non-zero value you can set the select open and with setting it to zero it will be closed.

So your code would be like this:

const handleClick = () => {
    selectRef.size=10;// optional number based on you
};

Try it and let me know if it works out.

answered Jun 18 '19 at 17:55

Alireza HI

1,873
1
12
20

This is not quite what the OP is asking. This will cause the drop down to cease being a drop down and instead be a list. – Scott Marcus Jun 18 '19 at 18:03
Maybe you're right because I haven't try it and the context didn't mention the part too, I think so. But just left it here as an option to be tried. – Alireza HI Jun 18 '19 at 18:04
Not maybe. Definitely. – Scott Marcus Jun 18 '19 at 18:07

score 0 · Answer 2 · answered Jun 19 '19 at 11:25

This is one way of doing it:

See if that works for you.

function App() {
  
  const [openDrop,setOpenDrop] = React.useState(false);
  
  function toggleDrop() {
    setOpenDrop((prevState)=>!prevState);
  }
  
  return(
    <React.Fragment>
      <button onClick={toggleDrop}>Drop</button>
      <div className="main">
        App
        {openDrop && <Dropdown/>}
      </div>
    </React.Fragment>
  );
}

function Dropdown() {

  function doSomething() {
    console.log('Let me handle this...');
  }

  return(
    <div>
      <ul>
        <li onClick={doSomething}>Item 1</li>
        <li onClick={doSomething}>Item 2</li>
      </ul>
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

.main {
  background-color: lightblue;
}

li {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

I need a native select to have the behave of a select in the mobile side as well, so to do what you proposed I need to design the dropdown for mobile also — Soufiane AIT AKKACHE, Jun 19 '19 at 15:19
Can you provide a snippet or a CodeSandbox with an example with minimal functionality? — cbdeveloper, Jun 19 '19 at 15:24
Take a look at [this](https://stackoverflow.com/questions/360431/can-i-open-a-dropdownlist-using-jquery/10844589#10844589) and [this](https://stackoverflow.com/questions/360431/can-i-open-a-dropdownlist-using-jquery/10844589#10844589) — cbdeveloper, Jun 19 '19 at 15:52

How to display a dropdown options when clicking in a button?

2 Answers2