[pickers] Required field does not work as expected for DatePicker

[saewitz]

Steps to reproduce

Thanks for helping with this library!

https://stackblitz.com/edit/react-zy9jcg?file=Demo.tsx

Steps:

1. Create a DatePicker and mark it as required
2. Submit form without entering a value

The input should use the browser's built-in required field to note the field is required. Instead, it focuses the input and no note that the field is required.

This works as expected with an MUI TextField, and worked with DatePicker in mui-x v5.

Example code:

import * as React from 'react';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import TextField from '@mui/material/TextField/TextField';

export default function BasicDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker']}>
        <form onSubmit={(event) => event.preventDefault()}>
          <TextField label="Text field" required />
          <DatePicker label="Date picker" slotProps={{ textField: { required: true } }}  />
          <button type="submit">Submit</button>
        </form>
      </DemoContainer>
    </LocalizationProvider>
  );
}

Search keywords: datepicker required

[LukasTy]

Thank you for creating this issue @saewitz. We already have an issue with adding the top-level required prop https://github.com/mui/mui-x/issues/7633 and it was discussed that some competitors (i.e. Kendo handles the required validation natively, even though their input has a present value).

I think that this topic is somewhat separate because it can be handled even now. The only note is that it will probably not be possible to support this behavior with your example—the required prop would have to be defined on the field slot instead of textField to make this work. 😉