[pickers] Fix disableOpenPicker prop behavior (#13221)

mui · May 23, 2024 · bc93613 · bc93613
1 parent c9286cf
commit bc93613
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -86,7 +86,7 @@
     "@mnajdova/enzyme-adapter-react-18": "^0.2.0",
     "@mui/icons-material": "^5.15.7",
     "@mui/material": "^5.15.7",
-    "@mui/monorepo": "https://github.com/mui/material-ui#v5.15.7",
+    "@mui/monorepo": "github:mui/material-ui#v5.15.7",
     "@mui/utils": "^5.15.7",
     "@next/eslint-plugin-next": "^14.0.4",
     "@octokit/plugin-retry": "^6.0.1",

diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx
@@ -152,13 +152,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>
+        ),
+      }),
     };
   }
 

diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts
@@ -97,8 +97,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>;
 }
@@ -125,8 +124,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;
@@ -166,7 +164,7 @@ export const usePickerViews = <
   TAdditionalProps
 >): UsePickerViewsResponse<TView> => {
   const { onChange, open, onSelectedSectionsChange, 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 } =
@@ -184,9 +182,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';
@@ -201,7 +197,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
@@ -163,6 +163,34 @@ function innerDescribePicker(ElementToTest: React.ElementType, options: Describe
       expect(screen.queryByMuiTest('picker-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,
+      );
+    });
+  });
 }
 
 /**

diff --git a/yarn.lock b/yarn.lock
@@ -1881,9 +1881,9 @@
     react-is "^18.2.0"
     react-transition-group "^4.4.5"
 
-"@mui/monorepo@https://github.com/mui/material-ui#v5.15.7":
+"@mui/monorepo@github:mui/material-ui#v5.15.7":
   version "5.15.7"
-  resolved "https://github.com/mui/material-ui#b80acd69c7c848709d01465d6727b13ed6109258"
+  resolved "https://codeload.github.com/mui/material-ui/tar.gz/b80acd69c7c848709d01465d6727b13ed6109258"
   dependencies:
     "@googleapis/sheets" "^5.0.5"
     "@slack/bolt" "^3.17.1"
@@ -13615,7 +13615,16 @@ string-replace-loader@^3.1.0:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -13694,7 +13703,14 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -14946,7 +14962,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343"
   integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -14964,6 +14980,15 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"