[base-ui][useSelect] onChange not working when activated through keyboard (Enter or Space key press)

[smellai]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/stackblitz-starters-gnadul?file=src%2FApp.tsx

Steps:

1. focus combobox with keyboard
2. activate it with spacebar or Enter
3. navigate the list with arrow-up arrow-down
4. activate different option with enter or space
5. combobox value not changing

Current behavior

it works as expected with keyboard interaction on version 5.0.0-beta.25, buggy in version 5.0.0-beta.37

it works as expected with mouse click on latest.

Expected behavior

both mouse and keyboard interactions work as they were working in previous versions

Context

might be related to what discussed already in another issue #40486 (comment)

Your environment

npx @mui/envinfo

  @mui/base: 5.0.0-beta.37 => 5.0.0-beta.37 
    @mui/core-downloads-tracker:  5.15.10 
    @mui/material: 5.15.10 => 5.15.10 
    @mui/private-theming:  5.15.9 
    @mui/styled-engine:  5.15.9 
    @mui/system:  5.15.9 
    @mui/types:  7.2.13 
    @mui/utils:  5.15.11 
    @types/react: 17.0.2 => 17.0.2 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    typescript: 4.9.5 => 4.9.5 

browser: Chrome

Search keywords: keyboard select combobox useSelect base

[mj12albert]

@smellai I can reproduce the issue in your sandbox, but I don't think it's an issue with Base UI

I tested this keyboard interaction using the Controlled Select demo in the docs, and also the hook demo but converted to controlled mode: https://stackblitz.com/edit/mcve-react-base-ui-fd26fm?file=src%2FApp.tsx - both work as expected!

[smellai]

so the issue is with the ref (line 50). If I remove that, the selection works. but I will loose the related functionality that I had implemented with that ref and that worked fine with previous versions.

[mj12albert]

@smellai You're right ~ refs should be passed to the option through the hook instead of directly:

const CountryOption = memo(({ option }: CountryOptionProps) => {
  const optionRef = useRef<HTMLLIElement>(null);

  const { getRootProps, highlighted } = useOption({
    value: option.value,
    label: option.label,
    disabled: false,
    rootRef: optionRef, // <------------------
  });

  const countryCallingCode = useMemo(
    () => getCountryCallingCode(option.value),
    [option.value]
  );
  return (
    <li
      {...getRootProps()} // <--- custom ref is here
      className={classNames('option', { ['highlighted']: highlighted })}
    >
      <span>{option.label}</span>
      <span>+{countryCallingCode}</span>
    </li>
  );
});

Demo: https://stackblitz.com/edit/stackblitz-starters-2pd8ej?file=src%2FApp.tsx

[github-actions]

👋 Thanks for using MUI Core!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://mui.com/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[smellai]

Thanks!