0

I have an select menu with arrow icon next to it. I want to catch the click event of the sibling icon element to open the options of the dropdown. 

import React from 'react';

const DropDown = (props) => {
  const options = props.options.map((option) => (
    <option key={option.value} value={option.value}>
      {option.displayValue}
    </option>
  ));
  return (
    <>
      <select>{options}</select>
      <box-icon name="chevron-down"></box-icon>
    </>
  );
};

export default DropDown;
Huku
  • 21
  • 3

1 Answers1

1

Sorry, there is no possible way to open select programmatically. I too found out now. you can check discussion regarding this here. I advice you to use select libraries like react-select. you can this library documentation here. This library has prop "menuIsOpen" change this to achieve your desired result.

Kireeti Ganisetti
  • 236
  • 3
  • 13
  • select element doesn't have click event. It doesn't work with focus() either – Huku Nov 18 '19 at 10:37
  • sorry i too don't know that click event is not available for select just came across it now. see my edit answer. I hope it will solve your issue. – Kireeti Ganisetti Nov 20 '19 at 03:39