Add onOpen prop

mui · Sep 13, 2024 · b79b5f4 · b79b5f4
1 parent 92da0c7
commit b79b5f4
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 5 deletions.
diff --git a/...ustomReadonlyBehaviorMaterialTextField.js → ...tom-behavior/ReadonlyMaterialTextField.js b/...ustomReadonlyBehaviorMaterialTextField.js → ...tom-behavior/ReadonlyMaterialTextField.js
@@ -10,7 +10,7 @@ import TextField from '@mui/material/TextField';
 
 function ReadonlyDateField(props) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const { value, timezone, format } = internalProps;
+  const { value, timezone, format, onOpen } = internalProps;
   const { InputProps, slotProps, slots, ...other } = forwardedProps;
 
   const placeholder = useFieldPlaceholder(internalProps);
@@ -28,6 +28,7 @@ function ReadonlyDateField(props) {
       placeholder={placeholder}
       InputProps={{ ...InputProps, readOnly: true }}
       error={hasValidationError}
+      onClick={onOpen}
     />
   );
 }
@@ -38,7 +39,7 @@ function ReadonlyFieldDatePicker(props) {
   );
 }
 
-export default function CustomReadonlyBehaviorMaterialTextField() {
+export default function ReadonlyMaterialTextField() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <ReadonlyFieldDatePicker />

diff --git a/...stomReadonlyBehaviorMaterialTextField.tsx → ...om-behavior/ReadonlyMaterialTextField.tsx b/...stomReadonlyBehaviorMaterialTextField.tsx → ...om-behavior/ReadonlyMaterialTextField.tsx
@@ -10,7 +10,7 @@ import TextField from '@mui/material/TextField';
 
 function ReadonlyDateField(props: DateFieldInPickerProps<Dayjs, false>) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const { value, timezone, format } = internalProps;
+  const { value, timezone, format, onOpen } = internalProps;
   const { InputProps, slotProps, slots, ...other } = forwardedProps;
 
   const placeholder = useFieldPlaceholder(internalProps);
@@ -28,6 +28,7 @@ function ReadonlyDateField(props: DateFieldInPickerProps<Dayjs, false>) {
       placeholder={placeholder}
       InputProps={{ ...InputProps, readOnly: true }}
       error={hasValidationError}
+      onClick={onOpen}
     />
   );
 }
@@ -38,7 +39,7 @@ function ReadonlyFieldDatePicker(props: DatePickerProps<Dayjs>) {
   );
 }
 
-export default function CustomReadonlyBehaviorMaterialTextField() {
+export default function ReadonlyMaterialTextField() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <ReadonlyFieldDatePicker />

diff --git a/...onlyBehaviorMaterialTextField.tsx.preview → ...ior/ReadonlyMaterialTextField.tsx.preview b/...onlyBehaviorMaterialTextField.tsx.preview → ...ior/ReadonlyMaterialTextField.tsx.preview
diff --git a/docs/data/date-pickers/custom-field/custom-field.md b/docs/data/date-pickers/custom-field/custom-field.md
@@ -153,7 +153,7 @@ Learn more about the accessible DOM structure and its difference compared to the
 
 ### Using a read-only `TextField`
 
-{{"demo": "CustomReadonlyBehaviorMaterialTextField.js", "defaultCodeOpen": false}}
+{{"demo": "custom-behavior/ReadonlyMaterialTextField.js", "defaultCodeOpen": false}}
 
 ### Using an `Autocomplete`
 

diff --git a/packages/x-date-pickers/src/hooks/useSplitFieldProps.ts b/packages/x-date-pickers/src/hooks/useSplitFieldProps.ts
@@ -24,6 +24,7 @@ const SHARED_FIELD_INTERNAL_PROP_NAMES = [
   'disabled',
   'readOnly',
   'dateSeparator',
+  'onOpen',
 ] as const;
 
 type InternalPropNames<TValueType extends FieldValueType> =

diff --git a/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx b/packages/x-date-pickers/src/internals/hooks/useDesktopPicker/useDesktopPicker.tsx
@@ -156,6 +156,7 @@ export const useDesktopPicker = <
       timezone,
       label,
       name,
+      onOpen: actions.onOpen,
       autoFocus: autoFocus && !props.open,
       focused: open ? true : undefined,
       ...(inputRef ? { inputRef } : {}),

diff --git a/packages/x-date-pickers/src/internals/models/fields.ts b/packages/x-date-pickers/src/internals/models/fields.ts
@@ -18,4 +18,5 @@ export interface BaseFieldProps<
   format?: string;
   disabled?: boolean;
   ref?: React.Ref<HTMLDivElement>;
+  onOpen: (event: React.UIEvent) => void;
 }