Multiline TextField Fires onInvalid Without Interaction

[mlh758]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When using TextField with multiline the onInvalid event fires repeatedly without any interaction when testing with jsdom.

Expected behavior 🤔

The onInvalid event should not fire at all. In the test below if you remove multiline it behaves as expected.

A regular textarea element also passes the test.

Steps to reproduce 🕹

Jest spec, I used create-react-app textarea --template typescript and added the dependencies below:

import { TextField } from '@material-ui/core';
import { render } from '@testing-library/react';
import React from 'react';

const Component = ({onInvalid}: {onInvalid: () => void}): JSX.Element => {
  return (
    <TextField
      required
      onInvalid={onInvalid}
      multiline
      label="Text Area"
      placeholder="fill this in"
    />
  );
};

it('should not trigger onInvalid', () => {
  const handleInvalid = jest.fn();
  render(<Component onInvalid={handleInvalid}/>);
  expect(handleInvalid).not.toBeCalled();
});

Dependencies:

"dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.43",
    "@types/react": "^16.14",
    "@types/react-dom": "^16.9",
    "react": "^16.14",
    "react-dom": "^16.14",
    "react-scripts": "5.0.1",
    "typescript": "^4.7.4",
    "web-vitals": "^2.1.4",
    "@material-ui/core": "~4"
  },

Context 🔦

This has caused a text that uses onInvalid to enter an infinite loop, although it works fine in an actual browser (tested with Chrome, Firefox, and Safari).

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 12.1
  Binaries:
    Node: 16.14.2 - ~/.asdf/installs/nodejs/16.14.2/bin/node
    Yarn: Not Found
    npm: 8.5.5 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 103.0.5060.53
    Edge: Not Found
    Firefox: 98.0.1
    Safari: 15.2
  npmPackages:
    @types/react: ^16.14 => 16.14.28
    react: ^16.14 => 16.14.0
    react-dom: ^16.14 => 16.14.0
    typescript: ^4.7.4 => 4.7.4

[ZeeshanTamboli]

Please provide a CodeSandbox (https://mui.com/r/issue-template or https://mui.com/r/ts-issue-template), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[mlh758]

In the steps to reproduce I included a jest spec that fails and should pass based on a create-react-app with TypeScript and the full list of dependencies.

Edit: Updated the description to specify the cra command I used.

[michaldudak]

I was able to reproduce the problem both using Material UI 4 and 5.

It may be caused by how React Testing Library renders a component. I've added a similar test to our suite (it doesn't use Jest) and it fails as well (although not as spectacularly - it's just the failing assertion).