Incorrect prop types on ListboxButton

[afk-mario]

🐛 Bug report

Current Behavior

Getting the following error:

**Warning: Failed prop type: Invalid prop `arrow` supplied to `ListboxButton`, expected one of type [boolean].**

And this is how I'm using the Listbox

function Listbox({ options, className, ...rest }) {
  const customClassName = classnames(`${classNamePrefix}`, className);

  return (
    <ListboxInput className={customClassName} {...rest}>
      <ListboxButton
        className={`${classNamePrefix}-button`}
        arrow={() => <CgChevronDown />}
      />
      <ListboxPopover className={`${classNamePrefix}-popover`}>
        <ListboxList className={`${classNamePrefix}-list`}>
          {options.map(({ value, label }) => {
            return (
              <ListboxOption
                key={value}
                value={value}
                className={`${classNamePrefix}-option`}
              >
                {label}
              </ListboxOption>
            );
          })}
        </ListboxList>
      </ListboxPopover>
    </ListboxInput>
  );
}

Expected behavior

Listbox Button accepts a boolean or node

Reproducible example

https://codesandbox.io/s/hidden-rain-mbovdk?file=%2Fsrc%2Findex.js

[jonrutter]

Hi @afk-mario! I think this is an issue with your code. The component expects arrow to be a boolean or node, and you are passing it a function. It should work correctly if you pass it the icon directly:

<ListboxButton
  className={`${classNamePrefix}-button`}
  arrow={<CgChevronDown />}
/>

Here's a sandbox of a working example: https://codesandbox.io/s/charming-brahmagupta-emibiv?file=/src/index.js

[afk-mario]

The component expects arrow to be a boolean or node,

You are right! I missed it I think I did because the error is

Warning: Failed prop type: Invalid prop `arrow` supplied to `ListboxButton`, expected one of type [boolean].

instead of

[Warning: Failed prop type: Invalid prop `arrow` supplied to `ListboxButton`, expected one of type [boolean, node].