WIP hook and event propagation

mui · May 24, 2023 · a04e420 · a04e420
1 parent 64ba24d
commit a04e420
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 13 deletions.
diff --git a/packages/x-date-pickers/src/DateField/DateField.tsx b/packages/x-date-pickers/src/DateField/DateField.tsx
@@ -8,6 +8,26 @@ import { useSlotProps } from '@mui/base/utils';
 import { DateFieldProps } from './DateField.types';
 import { useDateField } from './useDateField';
 
+const useClearEndAdornment = ({
+  clearable,
+  InputProps,
+  onClear,
+  clearIcon = <ClearIcon fontSize="small" />,
+}) => {
+  return {
+    endAdornment: clearable ? (
+      <React.Fragment>
+        {InputProps?.endAdornment}
+        <IconButton className="deleteIcon" onClick={onClear} tabIndex={-1}>
+          {clearIcon}
+        </IconButton>
+      </React.Fragment>
+    ) : (
+      InputProps?.endAdornment
+    ),
+  };
+};
+
 type DateFieldComponent = (<TDate>(
   props: DateFieldProps<TDate> & React.RefAttributes<HTMLDivElement>,
 ) => JSX.Element) & { propTypes?: any };
@@ -51,18 +71,21 @@ const DateField = React.forwardRef(function DateField<TDate>(
     inputRef: externalInputRef,
   });
 
+  console.log(fieldProps);
+
+  const ProcessedInputProps = useClearEndAdornment({
+    onClear,
+    clearable,
+    InputProps: fieldProps.InputProps,
+  });
+
   return (
     <TextField
       ref={ref}
       {...fieldProps}
       InputProps={{
-        ...fieldProps.InputProps,
+        ...ProcessedInputProps,
         readOnly,
-        endAdornment: clearable ? (
-          <IconButton className="deleteIcon" onClick={onClear}>
-            <ClearIcon />
-          </IconButton>
-        ) : undefined,
       }}
       inputProps={{ ...fieldProps.inputProps, inputMode, onPaste, ref: inputRef }}
     />

diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts
@@ -143,13 +143,13 @@ export const useField = <
   });
 
   const handleInputBlur = useEventCallback((event: React.FocusEvent<HTMLInputElement>, ...args) => {
-    const isClearButton: Boolean = Boolean(
+    const isClearButton = Boolean(
       event.relatedTarget?.className?.split(' ')?.includes('deleteIcon'),
     );
-    if (!isClearButton) {
-      onBlur?.(event, ...(args as []));
-      setSelectedSections(null);
-    }
+    // if (!isClearButton) {
+    onBlur?.(event, ...(args as []));
+    setSelectedSections(null);
+    // }
   });
 
   const handleInputPaste = useEventCallback((event: React.ClipboardEvent<HTMLInputElement>) => {
@@ -480,13 +480,17 @@ export const useField = <
     setSelectedSections: (activeSectionIndex) => setSelectedSections(activeSectionIndex),
   }));
 
-  const handleClearValue = (...args) => {
+  const handleClearValue = (event, ...args) => {
+    event.stopPropagation();
+    event.preventDefault();
     onClear?.(...(args as []));
     clearValue();
-    inputRef?.current?.focus();
     setSelectedSections(0);
+    inputRef?.current?.focus();
   };
 
+  console.log(selectedSectionIndexes);
+
   return {
     placeholder,
     autoComplete: 'off',