[DatePicker] fix validationOnLoad prop is ignored

change/@fluentui-react-f7e63c25-beed-4e4a-bdea-50c96a909588.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(DatePicker): onLoadValidation can be turned off through textField props ",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react/src/components/DatePicker/DatePicker.base.tsx

@@ -117,6 +117,7 @@ function useErrorMessage(
     formatDate,
     minDate,
     maxDate,
+    textField,
   }: IDatePickerProps,
   selectedDate: Date | undefined,
   setSelectedDate: (date: Date | undefined) => void,
@@ -125,6 +126,9 @@ function useErrorMessage(
 ) {
   const [errorMessage, setErrorMessage] = React.useState<string | undefined>();
   const [statusMessage, setStatusMessage] = React.useState<string | undefined>();
+  const isFirstLoadRef = React.useRef<boolean>(true);
+
+  const validateOnLoad = textField?.validateOnLoad ?? true;
 
   const validateTextInput = (date: Date | null = null): void => {
     if (allowTextInput) {
@@ -176,6 +180,14 @@ function useErrorMessage(
   };
 
   React.useEffect(() => {
+    if (isFirstLoadRef.current) {
+      isFirstLoadRef.current = false;
+
+      if (!validateOnLoad) {
+        return;
+      }
+    }
+
     if (isRequired && !selectedDate) {
       setErrorMessage(strings!.isRequiredErrorMessage || ' ');
     } else if (selectedDate && isDateOutOfBounds(selectedDate, minDate, maxDate)) {
@@ -193,6 +205,7 @@ function useErrorMessage(
     // eslint-disable-next-line react-hooks/exhaustive-deps
     selectedDate && getDatePartHashValue(selectedDate),
     isRequired,
+    validateOnLoad,
   ]);
 
   return [

packages/react/src/components/DatePicker/DatePicker.test.tsx

@@ -170,6 +170,31 @@ describe('DatePicker', () => {
     });
   });
 
+  it('should not set initial error when required input is empty and validateOnLoad is false', () => {
+    // See https://github.com/facebook/react/issues/11565
+    jest.spyOn(ReactDOM, 'createPortal').mockImplementation(node => node as any);
+
+    safeCreate(
+      <DatePickerBase isRequired={true} allowTextInput={true} textField={{ validateOnLoad: false }} />,
+      datePicker => {
+        const textfield = datePicker.root.findByType(TextField);
+        const input = datePicker.root.findByType('input');
+
+        expect(textfield.props.errorMessage).toBeUndefined();
+
+        // open the datepicker then dismiss
+        renderer.act(() => {
+          input.props.onClick();
+        });
+        renderer.act(() => {
+          input.props.onClick();
+        });
+
+        expect(textfield.props.errorMessage).not.toBeUndefined();
+      },
+    );
+  });
+
   it('clears error message when required input has date selected from calendar and allowTextInput is true', () => {
     // See https://github.com/facebook/react/issues/11565
     jest.spyOn(ReactDOM, 'createPortal').mockImplementation(node => node as any);