React select clicking on the label doesn't trigger the menu

Question

I am using react select and I have the following:

import ReactSelect from "react-select"

...

const sortOptions = [
    {label: "FEATURED", value: "DEFAULT"},
    {label: "PRICE (LOW TO HIGH)", value: "ASC"},
    {label: "PRICE (HIGH TO LOW)", value: "DESC"},
]

const [sortMenuVisible, toggleSortMenu] = useState(false)

const handleSort = e => {
    e.preventDefault()
    toggleSortMenu(!sortMenuVisible)
}

const handleOnChange = el => {
    sortProducts(el.value)
    // toggleSortMenu(!sortMenuVisible)
}

const DropdownIndicator = () => null

const IndicatorSeparator = () => null

...

<label className="p-6" htmlFor="id-test-2">
    sort
</label>
<ReactSelect
    inputId="id-test-2"
    classNamePrefix="product-filter"
    options={sortOptions}
    onChange={handleOnChange}
    // placeholder=""
    defaultValue={sortOptions[0]}
    styles={customStyles}
    isSearchable={false}
    // menuIsOpen={true}
    components={{
        DropdownIndicator,
        IndicatorSeparator,
    }}
/>

...

my styling for the select:

const dot = () => ({
    alignItems: "center",
    display: "flex",

    ":before": {
        backgroundColor: DR_RED_0,
        borderRadius: 10,
        content: '" "',
        display: "block",
        marginRight: 8,
        height: 8,
        width: 8,
        position: "absolute",
        left: "-10px",
        top: "10px",
    },
})

export const customStyles = {
    option: (provided, state) => {
        return {
            ...provided,
            fontSize: "11px",
            letterSpacing: "2px",
            color: state.isSelected ? DR_RED_0 : DR_BLACK_0,
            backgroundColor: "#fff",
            cursor: "pointer",
            position: "relative",
            width: "auto",
            ...(state.isSelected ? dot() : null),
        }
    },
    menu: () => ({
        width: "240px",
        left: "-240px",
        border: `1px solid ${DR_BLACK_0}`,
        borderRadius: "3px",
        padding: "25px",
        backgroundColor: "#fff",
    }),
    menuList: () => ({
        cursor: "pointer",
    }),
    control: () => ({
        display: "flex",
        fontSize: "11px",
        letterSpacing: "2px",
        cursor: "pointer",
    }),
    singleValue: () => ({
        display: "none",
    }),
}

I need to click on a label which will never change and that will trigger the menu to open but it doesn't.

HTML generated:

Answer 1

Please have a look at this code

import React, { useState } from "react";
import ReactSelect from "react-select";
 
const Example = (props) => {
  const sortOptions = [
    { label: "FEATURED", value: "DEFAULT" },
    { label: "PRICE (LOW TO HIGH)", value: "ASC" },
    { label: "PRICE (HIGH TO LOW)", value: "DESC" }
  ];

  const [sortMenuVisible, toggleSortMenu] = useState(false);
  const [isMenuOpen, setMenuOpen] = useState(false);
  const handleSort = (e) => {
    e.preventDefault();
    toggleSortMenu(!sortMenuVisible);
  };

  const handleOnChange = (el) => {
    sortProducts(el.value);
    // toggleSortMenu(!sortMenuVisible)
  };

  const DropdownIndicator = () => null;

  const IndicatorSeparator = () => null;

  const handleClick = () => {
    console.log("here");
    setMenuOpen(!isMenuOpen);
  };
  return (
    <React.Fragment>
      <label className="p-6" htmlFor="id-test-2" onClick={handleClick}>
        sort
      </label>
      {isMenuOpen ? (
        <ReactSelect
          inputId="id-test-2"
          classNamePrefix="product-filter"
          options={sortOptions}
          onChange={handleOnChange}
          // placeholder=""
          defaultValue={sortOptions[0]}
          // styles={customStyles}
          isSearchable={false}
          menuIsOpen={isMenuOpen}
          components={{
            DropdownIndicator,
            IndicatorSeparator
          }}
        />
      ) : null}
    </React.Fragment>
  );
};
export default Example;

This will show/hide the react-select (with menuOpen) when clicked on Sort "label"