[Autocomplete] Autocomplete with multiline TextField incorrectly handle cursor movement and onMouseDown events.

[justtol]

Autocomplete component with multiline text field doesn't handle cursor correctly on mouse click when a text was entered.

Reproduced on the following code:
<Autocomplete freeSolo renderInput={params => (<TextField {...params} multiline />)}/>

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

1. Input any text into Autocomplete with mulitline textfield.
2. Click to any part of the entered text
3. Cursor is not moved to the clicked text.
4. If a TextField is not multilined then behaviour is correct and cursor is placed correctly when you click to the entered text.

Expected Behavior 🤔

1. Input any text into Autocomplete with mulitline textfield.
2. Click to any part of the entered text
3. Cursor is moved to the clicked text.

Context 🔦

I would like to use Autocomplete component to enter address with suggesstions. I can use Autocomplete with TextField without multiline on desktop browser, but it is not suitable for mobile browser because address is quite a long string.

Your Environment 🌎

Tech	Version
Material-UI	v4.8.3
Material-ui/lab	4.0.0-alpha.39
React	16.12.0
Browser	Chrome 79.0.3945.88

[oliviertassinari]

Do you have a reproduction?

[justtol]

It is reproducible here:
https://codesandbox.io/s/material-ui-358fg

[oliviertassinari]

@justtol Thanks, it's interesting. The component wasn't designed to support a textarea, and I have doubt that we should. However, I think that we could change the logic to check for the id instead of the type of the node:

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index de0bfd292..67cbd7dcd 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -734,7 +734,7 @@ export default function useAutocomplete(props) {

   // Prevent input blur when interacting with the combobox
   const handleMouseDown = event => {
-    if (event.target.nodeName !== 'INPUT') {
+    if (event.target.getAttribute('id') !== id) {
       event.preventDefault();
     }
   };

What do you think? Do you want to submit a pull request? :)