[Select][material-ui] Using notched property causes console warning in Chrome DevTools

[bpc1985]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to reproduce: https://codesandbox.io/s/happy-beaver-xgjdhr?file=/App.tsx

Current behavior 😯

When trying to add notched property to Select component, it causes warning in devtools

 Warning: Received `true` for a non-boolean attribute `notched`.

If you want to write it to the DOM, pass a string instead: notched="true" or notched={value.toString()}.
    at div
    at https://29yz35-5173.csb.app/node_modules/.vite/deps/@mui_material.js?v=313a1fab:4564:46
    at InputBase2 (https://29yz35-5173.csb.app/node_modules/.vite/deps/@mui_material.js?v=313a1fab:27248:17)
    at Input4 (https://29yz35-5173.csb.app/node_modules/.vite/deps/@mui_material.js?v=313a1fab:38695:17)
    at https://29yz35-5173.csb.app/node_modules/.vite/deps/@mui_material.js?v=313a1fab:4564:46
    at Select4 (https://29yz35-5173.csb.app/node_modules/.vite/deps/@mui_material.js?v=313a1fab:45890:17)
    at div
    at https://29yz35-5173.csb.app/node_modules/.vite/deps/@mui_material.js?v=313a1fab:4564:46
    at FormControl4 (https://29yz35-5173.csb.app/node_modules/.vite/deps/@mui_material.js?v=313a1fab:35518:17)
    at DropdownList (https://29yz35-5173.csb.app/src/DropdownList.tsx:12:32)
    at div
    at App (https://29yz35-5173.csb.app/src/App.tsx?t=1692266366182:16:47)

Expected behavior 🤔

It should not show red warning

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

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

[michaldudak]

The codesandbox you linked doesn't load and throws errors to the console (other than what you reported). I created another one (not using Projects) but it seems to work fine: https://codesandbox.io/s/friendly-chatterjee-423hmm?file=/DropdownList.tsx Could you take a look if I missed something?

[bpc1985]

The codesandbox you linked doesn't load and throws errors to the console (other than what you reported). I created another one (not using Projects) but it seems to work fine: https://codesandbox.io/s/friendly-chatterjee-423hmm?file=/DropdownList.tsx Could you take a look if I missed something?

Hi, I have already updated codesandbox: https://codesandbox.io/s/happy-beaver-xgjdhr?file=/App.tsx in github issue !

I also try to test your codesandbox and modifiy a little bit, it still show warning message in devtools

import { useState } from "react";
import { DropdownList } from "./DropdownList";

function App() {
  const [selectedValue, setSelectedValue] = useState(2);

  return (
    <DropdownList
      selectedValue={selectedValue}
      onChange={(e) => {
        setSelectedValue(Number(e.target.value));
      }}
      // listLabel="Test"
      size="small"
      options={[
        {
          label: "aaa",
          value: 1
        },
        {
          label: "bbb",
          value: 2
        }
      ]}
    />
  );
}

export default App;

You can see that warning in following picture

[michaldudak]

notched is a prop of the OutlinedInput. It does not exist on other variants.

[bpc1985]

notched is a prop of the OutlinedInput. It does not exist on other variants.

I try to test like this

notched={ variant === 'outlined' } even condition are true or false, it still generate warning

Warning: Received false for a non-boolean attribute notched.

Although type is (property) notched?: boolean

[michaldudak]

The type of the notched props isn't precise - it doesn't take the variant into consideration.

Try the following: notched={variant === 'outlined' ? true : undefined }

[bpc1985]

Thanks, using your code notched={variant === 'outlined' ? true : undefined } works now !

[michaldudak]

:+1: anyway, I'll keep this issue open as it's an area for improvement.

[gicontz]

Better use spread of props.

{...{ notched: false }} />

[johnhunter]

I had the same warning when using InputBase to render the input prop of Select. Filtering it out of the props resolved the issue.