[pickers] Fix disableOpenPicker prop behavior (mui#13212)

thomasmoon · Sep 6, 2024 · acbe945 · acbe945
1 parent 2ff2f35
commit acbe945
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,
+ );
+ });
+ });
 }
 
 /**