Multiline TextField Fires onInvalid Without Interaction

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 🌎

  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

Start by running the provided TypeScript Jest reproduction with the multiline @material-ui/core TextField and its required prop. Investigate the TextField behavior under jsdom, then verify that rendering does not call onInvalid or enter a loop while regular textarea behavior remains unchanged.