[Autocomplete] Custom slot props types

[fabians-px]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/react-wgjewylg?file=Demo.tsx
2. Check the typescript error on the listbox slot prop: Types of parameters 'props' and 'props' are incompatible. Property 'a' is missing in type 'HTMLAttributes<HTMLElement>' but required in type 'CustomListboxProps'.

Current behavior

I cannot define or extend the type of the listbox (and other) slot props when passing a custom component. For the Paper and Popper there are two interfaces AutocompletePaperSlotPropsOverrides and AutocompletePopperSlotPropsOverrides that could be redeclared but that is less flexible.

Expected behavior

I can use custom slots with custom props with type safety.

Context

I want to use a TreeView in the Autocomplete component. Thus I either have to replace the paper or listbox slot.

Is something like a TreeViewSelect planned at some point in the future?

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: autocomplete slot props

[aarongarciah]

@fabians-px may I ask how are you planning to combine the TreeView with the Autocomplete? From a UX perspective.

@siriwatknp can you provide guidance on the best way to augment slot types?

[fabians-px]

@aarongarciah Sure. We would like to select items from a multi-level tree structure and search/filter the tree structure using the autocomplete component. Selected items are displayed as chips as usual.

This Codesandbox is a good example: https://codesandbox.io/p/sandbox/treeview-select-autocomplete-mui-yh3rmc
Although the implementation seems like a workaround, passing a length 1 array with all data points as the options and using renderOption to render the tree view.

[aarongarciah]

@flaviendelangle do you think combining the Autocomplete and the TreeView as implemented in the sandbox from @fabians-px can work properly? I see that clicking the checkboxes causes the items to expand/collapse, which is probably a bad UX.

[fabians-px]

@aarongarciah @flaviendelangle I want to clarify that the provided codesandbox is not mine but just an example I found while googling for "mui autocomplete treeview" with the problems mentioned above

[flaviendelangle]

At first glance, I'd say that it would make more sense to have a support for nested options directly on the Autocomplete.
But I guess that with some hack one could make a Autocomplete + Tree View work.
I'm slightly worried that getting the focus and keyboard management fully correct between the two might be hard 😬

[aarongarciah]

I'm slightly worried that getting the focus and keyboard management fully correct between the two might be hard 😬

Yeah, I'm afraid that won't work properly. @fabians-px I think you're better off building a custom solution combining different components (TextField, Chip, TreeView) than mixing Autocomplete and TreeView.