How to open the option list of select using JS in React?

Question

I want to open the options dropdown of select on an external icon component click

I'm using react-quill, the select dropdown already comes with an undesired icon that i hide using

display:none

then I added my customized icon component <MyIcon /> , but the problem is when i click on the icon nothing happens.

So I created an onClick function on the surrounding dev to fire a click() on the select tag to open up.

But not working.

 <div
    className="editor-dropdown"
    onClick={() => {
      let element: HTMLElement = document.getElementsByClassName(
        'ql-header',
      )[0] as HTMLElement;
      element.click();
    }}
  >
    <select
      className="ql-header"
      id="fontsize-select"
      defaultValue={'4'}
      onChange={(e) => e.persist()}
    >
      <option value="1">Heading 1</option>
      <option value="2">Heading 2</option>
      <option value="3">Heading 3</option>
      <option value="4" selected>
        Normal
      </option>
    </select>
    <MyIcon />
  </div>

Check this question and quite many answers under it https://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due — RAllen, Jun 25 '23 at 14:49
Check [this](https://moderncss.dev/custom-select-styles-with-pure-css/) out. There is a runnable demo at the bottom of the page. — RAllen, Jun 25 '23 at 23:42

How to open the option list of select using JS in React?

0 Answers0