[Autocomplete] Simplify tooltip usage in options
See original GitHub issueI found an issue with the implementation of autocomplete. If you look at the PR you generate the props from the useAutocomplete
hook and pass that directly to the li
. This is an issue because #11601 you are passing disabled directly from that which doesn’t allow for the Tooltip
workaround on the disabled elements here
I’ve already implemented this in #19235. I feel like this is a valid solution since you are currently able to change the 'ListBoxComponent = ul` to anything. You should have more control over the list item.
Also if you change the ListboxComponent
to a div look at the HTML rendering. It renders invalid HTML and you can’t change the li
to anything you need:
Heres a demo for the above screenshot:
- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
The Tooltip isn’t opening for disabled items.
Expected Behavior 🤔
I expect Tooltip
to render for disabled items. Using the workaround here the disabled items should render.
Steps to Reproduce 🕹
We need to be able to use the Tooltip
to explain to our users why an item is disabled. See example below:
Steps:
- Setup
Autocomplete
like above ^ - Try to render a tooltip
- The disabled items will not open the tooltip however the ones, not disabled will.
Context 🔦
We need to be able to use the Tooltip
to explain to our users why an item is disabled.
Your Environment 🌎
Check the above code sandbox for more info.
Tech | Version |
---|---|
Material-UI | v4.8.3 |
Material-UI-Lab | v4.0.0-alpha.39 |
React | 16.12.0 |
Browser | Chrom |
TypeScript | 3.7.4 |
Issue Analytics
- State:
- Created 4 years ago
- Reactions:35
- Comments:7 (6 by maintainers)
Top GitHub Comments
Would it make sense to make this change? Userland:
From the implementation side of things, it would mean something close to this to have it work:
Does anyone want to work on it? 😃
@ImanMahmoudinasab The hardest part is missing: to get it merged in the
next
branch. We would need a pull request, fix the tests, update the documentation, etc.