material-ui: Autocomplete with multiline textfield logs error

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

When having a multiline textfield inside autocomplete, it logs an error (only in non-production):

MUI: Unable to find the input element. It was resolved to [object HTMLTextAreaElement] while an HTMLInputElement was expected.
Instead, Autocomplete expects an input element.

Make sure you have customized the input component correctly.

However aside the error log, it works as expected.

Expected behavior 🤔

Having a multiline textfield inside autocomplete, should not log an error.

Steps to reproduce 🕹

Steps:

Have a multiline textfield inside renderInput of autocomplete
Check console

https://codesandbox.io/s/autocomplete-textfield-multiline-error-33l8w?file=/src/App.js

Context 🔦

I need to have a autocomplete with a textfield that supports multiline. The error seems to come from this check, however I don’t really get why a Textarea is not supported.

https://github.com/mui-org/material-ui/blob/c82145cbf97de5525b1c33e80ee2c4feaf7d8c38/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js#L528

Your environment 🌎

`npx @mui/envinfo`

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

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 3
Comments: 15 (10 by maintainers)

Commits related to this issue

#29961 add prop to autocomplete which turns off the custom functionality for up and down arrows if set to false and updated the docs to represent this change — committed to cdennington/material-ui by cdennington a year ago
Merge pull request #1 from cdennington/feature/autocomplete-with-multiline-textfield-logs-error #29961 add prop to autocomplete which turns off the custom functional… — committed to cdennington/material-ui by cdennington a year ago
#29961 tested that the new prop on the autocomplete component works as expected and updated the docs to reflect this change — committed to cdennington/material-ui by cdennington a year ago

Most upvoted comments

@oliviertassinari I have an autocomplete for choosing a long-form message (around 100 chars) from a dropdown with freeSolo on. I also need give the user the ability to create a custom message if they don’t find a match. If there isn’t an exact match, I also add an entry to the suggestions list to create the entry as they typed it. The suggestions don’t have line-breaks in them, so I can still use Enter key to select if I want to, but the whole typed or selected (item’s) text needs to be visible. I am horizontally limited, so when in single-line mode, typing more than 20 chars hides the beginning of the typed/selected text, which is why I want multi-line. In my case, it’s not for adding line breaks; it’s for seeing the entirety of the text, wrapping rather than clipped off.

lifenstein on Dec 2, 2022

New to open source and looking to pick up an issue. Is this one currently being worked on?

iclaude3 on Jan 17, 2022

There’s no way to remove it in dev mode. It doesn’t show up in the production build.

michaldudak on Sep 1, 2022

is there a way to remove the warning, or do we need to live with this morning if we want to use multiline text field that will render textarea?

bryanltobing on Aug 24, 2022

Reading an issue and it looks like the linked PR above closes it, or not?

account-sasha on May 5, 2022