Radix ui with downshift select

[abdallahz3]

• downshift version: 7.0.1
• node version: 19.1.0
• npm (or yarn) version: npm

Relevant code or config

    <Popover.Root
    onOpenChange={() => {
      openMenu();
    }}
    >
      <Popover.Trigger asChild>
        <button>
          <div
            /* ref={getToggleButtonProps().ref} */
          >
            <span>{selectedItem ? selectedItem.title : "Elements"}</span>
            <span>{isOpen ? <>&#8593;</> : <>&#8595;</>}</span>
          </div>
        </button>
      </Popover.Trigger>
        {isOpen && (
          <Popover.Portal forceMount>
            <Popover.Content
              asChild
              className="z-10 w-72 h-[300px] max-h-80 overflow-scroll"
            >
              <motion.div initial={{opacity: 0, y: 10, skewX: "5deg"}} animate={{opacity: 1, y: 0, skewX: "0deg"}}>
                <ul className="bg-white" {...getMenuProps()}>
                  {books.map((item: any, index) => (
                    <li
                      className={cn(
                        highlightedIndex === index && "bg-blue-300",
                        selectedItem === item && "font-bold",
                        "py-2 px-3 shadow-sm flex flex-col"
                      )}
                      key={`${item.value}${index}`}
                      {...getItemProps({ item, index })}
                    >
                      <span>{item.title}</span>
                      <span className="text-sm text-gray-700">
                        {item.author}
                      </span>
                    </li>
                  ))}
                </ul>
              </motion.div>
            </Popover.Content>
          </Popover.Portal>
        )}
    </Popover.Root>

What you did: trying to use Radix ui Popover with downshift select

What happened: I get these errors in the console

downshift.esm.js:1844 downshift: The ref prop "ref" from getToggleButtonProps was not applied correctly on your element.

and

downshift.esm.js:1844 downshift: The ref prop "ref" from getMenuProps was not applied correctly on your element.

[silviuaavram]

well, getToggleButtonProps looks commented out, and getMenuProps seems that it's only called only when that popover is displayed.

I have no idea what to suggest here, since the usage is very different from the usages we aim to support. We follow ARIA for the select pattern, and having the whole widget in a popover is not something we aim to support out of the box.

Basically, all the getter props need to be called all the time, except getItemProps, which can get called only when the items are visible. If you can work around and achieve this constraint, great.

Let me know if I can help you further.