Problem with Nextjs (useSelect)

[karthikcodes6]

• downshift version: 6.1.2
• node version: v14.15.4
• npm (or yarn) version: yarn 1.22.10

Relevant code or config

What you did: I started to use the downshift useSelect in the nextJS code. I followed one example below

const {
    isOpen,
    selectedItem,
    getToggleButtonProps,
    getLabelProps,
    getMenuProps,
    highlightedIndex,
    getItemProps
  } = useSelect({ items: menuItems, onSelectedItemChange: (e) => console.log(e) });

   <div>
            <label {...getLabelProps()}>Choose an element:</label>
            <button type="button" {...getToggleButtonProps()}>
              {selectedItem?.label || 'Elements'}
            </button>
            <ul {...getMenuProps()}>
              {isOpen &&
                menuItems.map((item, index) => (
                  <li
                    style={highlightedIndex === index ? { backgroundColor: '#bde4ff' } : {}}
                    key={`${item}${index}`}
                    {...getItemProps({ item, index })}>
                    {item.label}
                  </li>
                ))}
            </ul>
          </div>

What happened:

This is what happened. When I click the button it doesn't work as expected instead it opens the menu instead of closing and after clicking outside it closing but when I clicked the button element it closes and opening again. It was weird.

Reproduction repository: I cannot reproduce the issue with new repository. I can reproduce the issue only in my existing code. I'm using "next": "^10.1.3", "react": "^17.0.2", "react-dom": "^17.0.2",

Problem description:

Suggested solution:

[silviuaavram]

Code looks OK. Is the component in an iframe?

Maybe you can debug in your setup. The area you shlould look for is probably in useMouseAndTouchTracker.

It may also have something to do with server side rendering. I am not sure, but it would be interesting to find out.

On Tue 13. 4. 2021 at 21:10, Karthikeyan @.***> wrote:

• downshift version: 6.1.2
• node version: v14.15.4
• npm (or yarn) version: yarn 1.22.10

Relevant code or config

What you did: I started to use the downshift useSelect in the nextJS code. I followed one example below

const { isOpen, selectedItem, getToggleButtonProps, getLabelProps, getMenuProps, highlightedIndex, getItemProps } = useSelect({ items: menuItems, onSelectedItemChange: (e) => console.log(e) });

Choose an element: {selectedItem?.label || 'Elements'}

{isOpen && menuItems.map((item, index) => (
• {item.label}
))}

What happened:

This is what happened. When I click the button it doesn't work as expected instead it opens the menu instead of closing and after clicking outside it closing but when I clicked the button element it closes and opening again. It was weird.

[image: CPT2104132331-393x85] https://user-images.githubusercontent.com/24937683/114599741-23480900-9cb1-11eb-96de-81329b15a2b1.gif

Reproduction repository: I cannot reproduce the issue with new repository. I can reproduce the issue only in my existing code. I'm using "next": "^10.1.3", "react": "^17.0.2", "react-dom": "^17.0.2",

Problem description:

Suggested solution:

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/downshift-js/downshift/issues/1263, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACWAZAE4AR3HATA3CP6G4ZLTISCK3ANCNFSM4232RJHQ .

[karthikcodes6]

No, it's not an iframe. The problem was when I click the button element it considering as an outside element and triggering the blur action and again triggering the button click action that's why the menu gets opened. And I removed the hook and reimplemented with Downshift old component it's working fine. I would say the assigning ref is problematic with downshif hooks. But I'm not able to reproduce this bug in any other boilerplate code.

[silviuaavram]

Which ref are you referring to?

[silviuaavram]

I can see that you can create a NextJS Codesandbox. Can you create one to repro the problem? Thanks!