Autocomplete control (React MUI) accidentally selects when click outside

[lukasf]

Describe the bug

The autocomplete control causes accidental value changes/selections: Normally on autocomplete/dropdowns, you can click outside the list to cancel and collapse it, when you don't want to select/change the value. This is also the case in stock React MUI autocomplete. But in JsonForms, when you expand the dropdown, hover over a value, and then decide to cancel out by clicking outside the list, the last hovered value is incorrectly confirmed, although it was never clicked!

Expected behavior

When clicking outside the dropdown list, the list should collapse and the original value should not change.

Steps to reproduce the issue

1. Go to Autocomplete sample
2. Expand the enum dropdown and hover over it
3. Move the cursor out of the list and click somewhere else on the page, so the list gets collapsed
4. See that the last hovered value is selected/confirmed!

Same also happens when you have selected a value, then expand the list, hover around, then click outside to collapse: Suddenly you have a different value selected (last one hovered), although you never clicked on it!

Screenshots

No response

In which browser are you experiencing the issue?

Microsoft Edge 120.0.2210.77, Google Chrome 120.0.6099.130

Which Version of JSON Forms are you using?

v3.1.0

Framework

React

RendererSet

Material

Additional context

This is not a problem of the React MUI control. Trying the same with standard React MUI controls does not show the issue:
https://mui.com/material-ui/react-autocomplete/

[sdirix]

Hi @lukasf,

Thanks for the report. I think this prop is to blame. I would be fine with changing this behavior as it can be unintuitive as you mentioned.

Would you like to contribute this change?

[lukasf]

Hi @sdirix,

I tried, but I failed to build jsonforms. I followed the steps from first time setup. But on pnpm run build, I get:

error TS2307: Cannot find module '@jsonforms/core'

On 5 out of 10 targets.

First I had wrong node.js installed (20.10), so I uninstalled and installed nodejs 16.20 and tried from scratch (deleted all and pulled repo). Still no luck. Not sure what is going on. Even pnpm run clean fails on 7/9 with "path not found". I am on Windows.

If it is just removing this one property, it might be easier for you to just do the change. But if you have an idea what is wrong here, please let me know.

[lukasf]

I managed to build on 3.1.0 tag using npm. And I can confirm that removing the autoSelect property indeed solves the issue!