[SelectUnstyled] useSelect demo crashes on tablet/smartphone

[luckerzxb]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

Run Unstyled select at the tablet or smartphone , when click the option list, i got the error.

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Expected behavior 🤔

when click the option list, change the select option.

Steps to reproduce 🕹

Steps:

1. follow the [https://mui.com/base/react-select/#the-useselect-hook] demo.
2. run it at sandbox.
3. use the [Open In new Window] URL run at tablet/smartphone(use chrome debug mode simulation).
4. when click the option list, i got the error.

Context 🔦

use the workaround below,can solve the issue.

<Listbox
        {...getListboxProps()}
        className={listboxVisible ? "" : "hidden"}
      >
        {options.map((option) => {
          const { onClick, ...rest } = getOptionProps(option);

          const isTouchDevice = () =>
            "ontouchstart" in window ||
            navigator.maxTouchPoints > 0 ||
            (navigator as any).msMaxTouchPoints > 0;
  
          // use touchend on tablet/smartphone
          return isTouchDevice() ? (
            <li key={option.value} onTouchEnd={onClick as any} {...rest}>
              {option.label}
            </li>
          ) : (
            <li key={option.value} onClick={onClick} {...rest}>
              {option.label}
            </li>
          );
        })}
      </Listbox>

Your environment 🌎

npx @mui/base

  i use Microsoft Edge 103.0.1264.49(64bit)

[ZeeshanTamboli]

@luckerzxb I am not able to reproduce it in the useSelect hook demo after opening it in the CodeSandbox as you mentioned. Also, the demo URL you provided is wrong. Are you on the latest version of MUI Base v5.0.0-alpha.91?

[nttd-zhangxibin]

@ZeeshanTamboli run demo in the sandbox: https://codesandbox.io/s/q3zo8b?file=/demo.tsx then change chrome to tablet simulation mode. can reproduce it.

i thought on the android chrome , it trigger two events: click and mouseover at the same time.

https://user-images.githubusercontent.com/36401841/182150919-9823d6fc-8762-48d3-9a96-6097e12bba17.mp4

[ZeeshanTamboli]

I can reproduce it now. Thanks for the reproduction steps. Looks like a bug.