Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[material-ui][Autocomplete] onHighlightChange called when listbox opens without any option being highlighted #43213

Open
sydneyjodon-wk opened this issue Aug 7, 2024 · 2 comments · May be fixed by #45438
Open

[material-ui][Autocomplete] onHighlightChange called when listbox opens without any option being highlighted #43213

sydneyjodon-wk opened this issue Aug 7, 2024 · 2 comments · May be fixed by #45438
Assignees
@mj12albert
Labels
bug 🐛 Something doesn't work component: autocomplete This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material

Comments

@sydneyjodon-wk
Copy link
Contributor

sydneyjodon-wk commented Aug 7, 2024 •
edited
Loading

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-d4b5ls?file=Demo.tsx

Steps:

  1. Set the onHighlightChange prop
  2. Check what is passed in for the event param

Current behavior

Hello 👋

I'm noticing that the onHighlightChange is typed as:

onHighlightChange?: (
    event: React.SyntheticEvent,
    option: Value | null,
    reason: AutocompleteHighlightChangeReason,
) => void;

with a non-null event param, but undefined seems to be coming through for the param. See demo:

autocomplete-undefined-event

Expected behavior

Would it be possible to change the typing of the prop to reflect the values that are being passed to event?

- event: React.SyntheticEvent,
+ event: React.SyntheticEvent | undefined,

This seems like it would be consistent with some other onHighlightChange props.

Context

We are trying to use strict null safety

Your environment

See codesandbox link

Search keywords: onHighlightChange, undefined event
@sydneyjodon-wk sydneyjodon-wk added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Aug 7, 2024
@zannager zannager added the component: autocomplete This is the name of the generic UI component, not the React module! label Aug 7, 2024
@ZeeshanTamboli
Copy link
Member

The onHighlightChange should only trigger when the highlighted option changes, not when the listbox opens. This seems to be a broader issue, as mentioned in #31383. Instead of changing the type, we should update the overall implementation. The types are correct that the event should always be present.

@ZeeshanTamboli ZeeshanTamboli added package: material-ui Specific to @mui/material bug 🐛 Something doesn't work and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Aug 13, 2024
@ZeeshanTamboli ZeeshanTamboli changed the title [Autocomplete] onHighlightChange called with undefined event contrary to type definition [material-ui][Autocomplete] onHighlightChange called with undefined event contrary to type definition Aug 13, 2024
@mj12albert mj12albert changed the title [material-ui][Autocomplete] onHighlightChange called with undefined event contrary to type definition [material-ui][Autocomplete] onHighlightChange called when listbox opens or closes without any option being highlighted Oct 23, 2024
@ZeeshanTamboli ZeeshanTamboli changed the title [material-ui][Autocomplete] onHighlightChange called when listbox opens or closes without any option being highlighted [material-ui][Autocomplete] onHighlightChange called when listbox opens without any option being highlighted Feb 27, 2025
@ZeeshanTamboli ZeeshanTamboli linked a pull request Feb 28, 2025 that will close this issue
Open
@ZeeshanTamboli
Copy link
Member

I have created PR #45438 to fix this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mj12albert mj12albert

Labels
bug 🐛 Something doesn't work component: autocomplete This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Autocomplete] Fix when onHighlightChange is called ZeeshanTamboli/material-ui
4 participants
@mj12albert @ZeeshanTamboli @sydneyjodon-wk @zannager