search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.69k stars 32.23k forks source link

Cannot use input as label for TextField in AutoComplete #33662

Open rubber-duck-software opened 2 years ago

rubber-duck-software commented 2 years ago

Duplicates

Latest version

Current behavior 😯

The label for a TextField can be any ReactNode. However if the label is an and the TextField is used in renderInput for Autocomplete, then the element cannot be focused.

code

Expected behavior 🤔

An input used as a label for a TextField should be focusable, even when used inside of AutoComplete renderInput.

Steps to reproduce 🕹

Steps:

  1. Go to https://stackblitz.com/edit/react-ts-wuuatm?file=App.tsx
  2. Click on the label for the top field. Notice the input receives focus
  3. Click on the label for the bottom field. Notice the input does not receive focus

Context 🔦

Working on an Application where the label for fields should be editable by admin users. In my app, when the user clicks an icon, the label should become editable. This is working for all fields except for AutoCompletes, where the label input cannot be focused.

Your environment 🌎

StackBlitz https://stackblitz.com/edit/react-ts-wuuatm?file=App.tsx

povilass commented 2 years ago

The issue already exists https://github.com/mui/material-ui/issues/33195

ZeeshanTamboli commented 2 years ago

First of all, a very rare use case where you need the label as an input. Also, it's not an exact duplicate of #33195 but the logic to solve that could solve this as well. I also noticed that it is possible to select the input in the Autocomplete by Tab key, so is it something to do with some z-index value?