From acbe945bccc26e91102bcac61e8beac708316798 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Thu, 23 May 2024 13:58:22 +0300
Subject: [PATCH] [pickers] Fix `disableOpenPicker` prop behavior (#13212)

---
 .../DesktopDateTimePickerLayout.tsx           |  6 ++--
 .../useDesktopPicker/useDesktopPicker.tsx     | 16 +++++-----
 .../hooks/usePicker/usePickerViews.ts         | 14 ++++-----
 .../pickers/describePicker/describePicker.tsx | 30 ++++++++++++++++++-
 4 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx
index ed7c285f0586a..58ac0d240bb36 100644
--- a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx
+++ b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx
@@ -21,13 +21,13 @@ function DesktopDateTimePickerLayout<
   TView extends DateOrTimeViewWithMeridiem,
 >(props: PickersLayoutProps<TValue, TDate, TView>) {
   const { toolbar, tabs, content, actionBar, shortcuts } = usePickerLayout(props);
-  const { sx, className, isLandscape, ref } = props;
+  const { sx, className, isLandscape, ref, classes } = props;
   const isActionBarVisible = actionBar && (actionBar.props.actions?.length ?? 0) > 0;
 
   return (
     <PickersLayoutRoot
       ref={ref}
-      className={clsx(className, pickersLayoutClasses.root)}
+      className={clsx(className, pickersLayoutClasses.root, classes?.root)}
       sx={[
         {
           [`& .${pickersLayoutClasses.tabs}`]: { gridRow: 4, gridColumn: '1 / 4' },
@@ -40,7 +40,7 @@ function DesktopDateTimePickerLayout<
       {isLandscape ? shortcuts : toolbar}
       {isLandscape ? toolbar : shortcuts}
       <PickersLayoutContentWrapper
-        className={pickersLayoutClasses.contentWrapper}
+        className={clsx(pickersLayoutClasses.contentWrapper, classes?.contentWrapper)}
         sx={{ display: 'grid' }}
       >
         {content}
diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx
index e2b70dd1421bc..3f54c063f1816 100644
--- a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx
+++ b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx
@@ -159,13 +159,15 @@ export const useDesktopPicker = <
     fieldProps.InputProps = {
       ...fieldProps.InputProps,
       ref: containerRef,
-      [`${inputAdornmentProps.position}Adornment`]: (
-        <InputAdornment {...inputAdornmentProps}>
-          <OpenPickerButton {...openPickerButtonProps}>
-            <OpenPickerIcon {...innerSlotProps?.openPickerIcon} />
-          </OpenPickerButton>
-        </InputAdornment>
-      ),
+      ...(!props.disableOpenPicker && {
+        [`${inputAdornmentProps.position}Adornment`]: (
+          <InputAdornment {...inputAdornmentProps}>
+            <OpenPickerButton {...openPickerButtonProps}>
+              <OpenPickerIcon {...innerSlotProps?.openPickerIcon} />
+            </OpenPickerButton>
+          </InputAdornment>
+        ),
+      }),
     } as typeof fieldProps.InputProps;
   }
 
diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts
index 47ff028538687..4ed9a1a87277b 100644
--- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts
+++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts
@@ -99,8 +99,7 @@ export interface UsePickerViewsProps<
   TView extends DateOrTimeViewWithMeridiem,
   TExternalProps extends UsePickerViewsProps<TValue, TDate, TView, any, any>,
   TAdditionalProps extends {},
-> extends UsePickerViewsBaseProps<TValue, TDate, TView, TExternalProps, TAdditionalProps>,
-    UsePickerViewsNonStaticProps {
+> extends UsePickerViewsBaseProps<TValue, TDate, TView, TExternalProps, TAdditionalProps> {
   className?: string;
   sx?: SxProps<Theme>;
 }
@@ -141,8 +140,7 @@ export interface UsePickerViewParams<
 
 export interface UsePickerViewsResponse<TView extends DateOrTimeViewWithMeridiem> {
   /**
-   * Does the picker have at least one view that should be rendered in UI mode ?
-   * If not, we can hide the icon to open the picker.
+   * Indicates if the the picker has at least one view that should be rendered in UI.
    */
   hasUIView: boolean;
   renderCurrentView: () => React.ReactNode;
@@ -185,7 +183,7 @@ export const usePickerViews = <
   TAdditionalProps
 >): UsePickerViewsResponse<TView> => {
   const { onChange, open, onClose } = propsFromPickerValue;
-  const { views, openTo, onViewChange, disableOpenPicker, viewRenderers, timezone } = props;
+  const { views, openTo, onViewChange, viewRenderers, timezone } = props;
   const { className, sx, ...propsToForwardToView } = props;
 
   const { view, setView, defaultView, focusedView, setFocusedView, setValueAndGoToNextView } =
@@ -203,9 +201,7 @@ export const usePickerViews = <
       views.reduce(
         (acc, viewForReduce) => {
           let viewMode: 'field' | 'UI';
-          if (disableOpenPicker) {
-            viewMode = 'field';
-          } else if (viewRenderers[viewForReduce] != null) {
+          if (viewRenderers[viewForReduce] != null) {
             viewMode = 'UI';
           } else {
             viewMode = 'field';
@@ -220,7 +216,7 @@ export const usePickerViews = <
         },
         { hasUIView: false, viewModeLookup: {} as Record<TView, 'field' | 'UI'> },
       ),
-    [disableOpenPicker, viewRenderers, views],
+    [viewRenderers, views],
   );
 
   const timeViewsCount = React.useMemo(
diff --git a/test/utils/pickers/describePicker/describePicker.tsx b/test/utils/pickers/describePicker/describePicker.tsx
index aee9affd86066..4f449b318cf96 100644
--- a/test/utils/pickers/describePicker/describePicker.tsx
+++ b/test/utils/pickers/describePicker/describePicker.tsx
@@ -148,7 +148,7 @@ function innerDescribePicker(ElementToTest: React.ElementType, options: Describe
       }
     });
 
-    it.skip('should render toolbar when `hidden` is `false`', function test() {
+    it('should render toolbar when `hidden` is `false`', function test() {
       if (hasNoView) {
         this.skip();
       }
@@ -178,6 +178,34 @@ function innerDescribePicker(ElementToTest: React.ElementType, options: Describe
       expect(screen.queryByTestId('pickers-toolbar')).to.equal(null);
     });
   });
+
+  describe('prop: disableOpenPicker', () => {
+    it('should not render the open picker button, but still render the picker if its open', function test() {
+      if (variant === 'static') {
+        this.skip();
+      }
+
+      render(
+        <ElementToTest
+          disableOpenPicker
+          {...propsToOpen}
+          slotProps={{
+            layout: {
+              classes: {
+                contentWrapper: 'test-pickers-content-wrapper',
+              },
+            },
+          }}
+        />,
+      );
+
+      expect(screen.queryByRole('button', { name: /Choose/ })).to.equal(null);
+      // check if anything has been rendered inside the layout content wrapper
+      expect(document.querySelector('.test-pickers-content-wrapper')?.hasChildNodes()).to.equal(
+        true,
+      );
+    });
+  });
 }
 
 /**