[Autocomplete] Can't select helper text content

[tforssander]

• 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 😯

When providing a helperText using the Autocomplete component with the TextField component, it's not possible to select the actual helper text content.

Expected Behavior 🤔

I expect the help text content to be selectable. As it works with just using the TextField component.

Working example: https://codesandbox.io/s/material-demo-forked-l8rom
Non-working example: https://codesandbox.io/s/material-demo-forked-102o6

Steps to Reproduce 🕹

Steps:

1. Visit https://codesandbox.io/s/material-demo-forked-102o6
2. Try to select the helper text

Context 🔦

I am trying to select the help text content that belongs to the text field.

Your Environment 🌎

`npx @material-ui/envinfo`

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
    Memory: 47.25 MB / 16.00 GB
    Shell: 5.0.11 - /usr/local/bin/bash
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    npm: 6.14.12 - ~/.nvm/versions/node/v14.16.1/bin/npm
  Managers:
    Homebrew: 2.5.8 - /usr/local/bin/brew
    pip2: 19.3 - /Library/Frameworks/Python.framework/Versions/2.7/bin/pip2
    pip3: 19.2.3 - /Library/Frameworks/Python.framework/Versions/3.7/bin/pip3
    RubyGems: 3.0.3 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.23.0 - /usr/local/bin/git
    Clang: 11.0.3 - /usr/bin/clang
  Servers:
    Apache: 2.4.41 - /usr/sbin/apachectl
  Virtualization:
    Docker: 20.10.5 - /usr/local/bin/docker
    Parallels: 13.3.2 - /usr/local/bin/prlctl
    VirtualBox: 6.0.4 - /usr/local/bin/vboxmanage
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
  IDEs:
    IntelliJ: 2020.3
    Nano: 2.0.6 - /usr/bin/nano
    Sublime Text: 3211 - /usr/local/bin/subl
    VSCode: 1.55.2 - /usr/local/bin/code
    Vim: 8.1 - /usr/local/bin/vim
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Bash: 5.0.11 - /usr/local/bin/bash
    Perl: 5.30.0 - /usr/local/bin/perl
    PHP: 7.3.11 - /usr/bin/php
    Python: 2.7.16 - /Library/Frameworks/Python.framework/Versions/2.7/bin/python
    Python3: 3.7.7 - /Library/Frameworks/Python.framework/Versions/3.7/bin/python3
    Ruby: 2.6.3 - /usr/bin/ruby
  Databases:
    MySQL: 10.14 - /usr/local/bin/mysql
    PostgreSQL: 11.5 - /usr/local/bin/postgres
    SQLite: 3.28.0 - /usr/bin/sqlite3
  Browsers:
    Chrome: 90.0.4430.93
    Edge: 90.0.818.51
    Safari: 14.0

[mnajdova]

From looking into the code, the reason why this is happening is because the root of the autocomplete focuses the TextField on click. The helper text is part of the input, so when clicked, it is focusing the input. Theoretically you could select the text, if you start the selection outside of the text field, but I see that this is not intuitive.

We have two options:

1. Add the helper text as a new element outside of the root of the autocomplete. We can have a new prop on the autocomplete directly for this, or use the InputProps.helperText.
2. Do nothing. I don't think this is a very critical bug, so maybe we can wait to see if more people have issues with it.

[oliviertassinari]

Option 1 sounds better. After #25365, we will be able to repurpose getRootProps() to apply it on the <Input>, instead of the <Root>. We will no longer need to apply ARIA attributes on the wrapper that includes the textbox and the popup.

diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.js b/packages/material-ui/src/Autocomplete/Autocomplete.js
index 31bde4c434..b5a10c7c74 100644
--- a/packages/material-ui/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui/src/Autocomplete/Autocomplete.js
@@ -579,7 +579,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
         ref={ref}
         className={clsx(classes.root, className)}
         styleProps={styleProps}
-        {...getRootProps(other)}
+        {...other}
       >
         {renderInput({
           id,
@@ -588,6 +587,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
           size: size === 'small' ? 'small' : undefined,
           InputLabelProps: getInputLabelProps(),
           InputProps: {
+            ...getRootProps(),
             ref: setAnchorEl,
             className: classes.inputRoot,
             startAdornment,

But yeah, I think that we can hold, for now.

[aizerin]

I also encountered this issue. My workaround is to disable propagation of onClick and onMouseDown event from FormHelperText

<Autocomplete
      ...
      renderInput={(params) => <TextField {...params} label="Movie" helperText="test" FormHelperTextProps={{onClick: (e) => {
        e.stopPropagation();
      }, onMouseDown:(e) => {
        e.stopPropagation()
      }}} />}
    />