Skip to content

[material-ui][Autocomplete] "Unable to find the input element" error while snapshot testing with react-test-renderer #40144

Open
@pgrabo

Description

@pgrabo

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/p/sandbox/reverent-worker-y7dtfw

Steps:

  1. Use Autocomplete component with renderInput prop specified as follows:
renderInput={(params) => (
  <Tooltip title="Tooltip">
    <TextField {...params} />
  </Tooltip>
)}
  1. Snapshot test such Autocomplete with "react-test-renderer": "18.2.0"

Current behavior 😯

Snapshot is created properly.
There is following error while creating snapshot:
"MUI: Unable to find the input element. It was resolved to null while an HTMLInputElement was expected.
Instead, Autocomplete expects an input element.

Make sure you have customized the input component correctly."

Expected behavior 🤔

Snapshot is created properly.
There are no errors while creating snapshot.

Context 🔦

I wanted to customize Autocomplete to show the tooltip for the input/TextFileld value whenever the value is too long and ends with ellipsis. I find it usefull for the users to see the full label in the tooltip, in case it is trucated in the input.

Your environment 🌎

npx @mui/envinfo
System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
  Binaries:
    Node: 20.4.0 - ~/.nvm/versions/node/v20.4.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v20.4.0/bin/yarn
    npm: 9.7.2 - ~/.nvm/versions/node/v20.4.0/bin/npm
  Browsers:
    Chrome: session. 

Chrome version used: Version 119.0.6045.200 (Official Build) (64-bit)

Metadata

Metadata

Assignees

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions