DatePicker validation issue in a form component

[prakhargupta1]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

1. How is the isInvalid checkbox supposed to work? I am a bit lost because:

• Date picker doesn't allow me to enter invalid dates
• In the screenshot below, when I entered a valid date, it gave me the error.

2. Another issue (in the case of an error) was the form border overlapping with the button.

Current behavior 😯

No response

Expected behavior 🤔

No response

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

System:
    OS: macOS 13.3
  Binaries:
    Node: 20.2.0 - ~/.nvm/versions/node/v20.2.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.2.0/bin/yarn
    npm: 9.6.6 - ~/.nvm/versions/node/v20.2.0/bin/npm
  Browsers:
    Chrome: 118.0.5993.88
    Edge: Not Found
    Safari: 16.4
  npmPackages:
    @emotion/react:  11.11.1 
    @emotion/styled:  11.11.0 
    @mui/base:  5.0.0-beta.20 
    @mui/core-downloads-tracker:  5.14.14 
    @mui/icons-material:  5.14.14 
    @mui/lab:  5.0.0-alpha.149 
    @mui/material:  5.14.14 
    @mui/private-theming:  5.14.14 
    @mui/styled-engine:  5.14.14 
    @mui/system:  5.14.14 
    @mui/toolpad: ^0.1.33 => 0.1.33 
    @mui/toolpad-components:  0.1.33 
    @mui/toolpad-core:  0.1.33 
    @mui/toolpad-utils:  0.1.33 
    @mui/types:  7.2.6 
    @mui/utils:  5.14.14 
    @mui/x-data-grid:  6.16.2 
    @mui/x-data-grid-pro:  6.16.2 
    @mui/x-date-pickers:  6.16.2 
    @mui/x-date-pickers-pro:  6.16.2 
    @mui/x-license-pro:  6.10.2 
    @mui/x-tree-view:  6.0.0-beta.0 
    @types/react:  18.2.31 
    react:  18.2.0 
    react-dom:  18.2.0 
    typescript:  5.2.2 

[apedroferreira]

If isInvalid is set to true it will show an error no matter what the input is. The original intention was that you can bind isInvalid to whatever custom validation logic you want, but it was just an early simple approach.
Maybe we could iterate on how it could work and also cover the behavior in a component guide.

As for the issue with the form border overlapping, can you consistently reproduce it? I will add improvements and fixes to this kind of thing soon but I'm not sure if they will fix this specific bug.

[Janpot]

Not sure this approach is very useful. When doing custom validation one should be able to also provide a message. I propose we remove this property until we have a viable solution?

[apedroferreira]

Not sure this approach is very useful. When doing custom validation one should be able to also provide a message. I propose we remove this property until we have a viable solution?

Sure, we could also improve the prop and add customizable messages if we decide on how it could work.