@mui/x-date-pickers 8.29.0 → 8.29.3

package/internals/hooks/useField/useFieldRootProps.d.ts

@@ -24,6 +24,7 @@ interface UseFieldRootPropsReturnValue {
   onBlur: React.FocusEventHandler<HTMLDivElement>;
   onFocus: React.FocusEventHandler<HTMLDivElement>;
   onClick: React.MouseEventHandler<HTMLDivElement>;
+  onMouseDown: React.MouseEventHandler<HTMLDivElement>;
   onPaste: React.ClipboardEventHandler<HTMLDivElement>;
   onInput: React.FormEventHandler<HTMLDivElement>;
   contentEditable: boolean;

package/internals/hooks/useField/useFieldRootProps.js

@@ -50,14 +50,22 @@ function useFieldRootProps(parameters) {
     stateResponse
   });
   const containerClickTimeout = (0, _useTimeout.default)();
-  const handleClick = (0, _useEventCallback.default)(event => {
+  const handleClick = (0, _useEventCallback.default)(() => {
     if (disabled || !domGetters.isReady()) {
       return;
     }
-    setFocused(true);
     if (parsedSelectedSections === 'all') {
+      setFocused(true);
       containerClickTimeout.start(0, () => {
-        const cursorPosition = document.getSelection().getRangeAt(0).startOffset;
+        // `getSelection`/`getRangeAt` can be unset transiently (e.g. focus
+        // moved before this 0-tick callback ran). Fall back to the first
+        // section in that case.
+        const selection = document.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+          setSelectedSections(sectionOrder.startIndex);
+          return;
+        }
+        const cursorPosition = selection.getRangeAt(0).startOffset;
         if (cursorPosition === 0) {
           setSelectedSections(sectionOrder.startIndex);
           return;
@@ -71,15 +79,83 @@ function useFieldRootProps(parameters) {
         }
         setSelectedSections(sectionIndex - 1);
       });
-    } else if (!focused) {
+      return;
+    }
+
+    // For trusted pointer input, `handleMouseDown` already ran and set the
+    // section. This branch only matters for `click` events that arrive
+    // without a preceding `mousedown` (programmatic `element.click()`, some
+    // assistive-technology activations, synthetic event sequences in tests).
+    // Fall back to the first section so the field doesn't enter a "focused
+    // but no active section" state.
+    if (!focused) {
       setFocused(true);
-      setSelectedSections(sectionOrder.startIndex);
-    } else {
-      const hasClickedOnASection = domGetters.getRoot().contains(event.target);
-      if (!hasClickedOnASection) {
+      if (parsedSelectedSections == null) {
+        setSelectedSections(sectionOrder.startIndex);
+      }
+    }
+  });
+
+  // Replaces Chromium's focus delegation with an explicit section focus on
+  // every primary mousedown inside the sections container. The CSS gate
+  // (`WebkitUserModify: read-only` while not `:focus-within`) can make the
+  // section's contenteditable span temporarily non-focusable, in which case
+  // Chromium falls back to the sections-container `tabindex=0` and our
+  // `handleFocus` then runs the "no active section" fallback, briefly
+  // selecting the first section before the click bubble corrects it.
+  // Setting the target section here (and letting `syncSelectionToDOM` move
+  // focus via `.focus()`, which works even with the user-modify rule
+  // active) skips that race entirely.
+  const handleMouseDown = (0, _useEventCallback.default)(event => {
+    if (disabled || !domGetters.isReady() || parsedSelectedSections === 'all') {
+      return;
+    }
+    if (event.button !== 0) {
+      return;
+    }
+    const target = event.target;
+    const sectionListRoot = domGetters.getRoot();
+    const isInsideSectionList = sectionListRoot.contains(target);
+    // Only the field root is ours outside the sections container: it is the
+    // target of a padding click. The adornments keep their own behavior.
+    if (!isInsideSectionList && target !== event.currentTarget) {
+      return;
+    }
+    const sectionElement = isInsideSectionList ? target.closest('[data-sectionindex]') : null;
+
+    // Blank space is the field padding and the area past the sections. Mimic
+    // the native date input: first section on entry, keep it afterwards.
+    // `preventDefault` is what keeps it, by stopping both the browser blur and
+    // Chromium's focus delegation.
+    const isBlankSpaceClick = sectionElement == null && (!isInsideSectionList || isPointOutsideSections(sectionListRoot, event.clientX));
+    if (isBlankSpaceClick) {
+      event.preventDefault();
+      if (!focused) {
+        setFocused(true);
         setSelectedSections(sectionOrder.startIndex);
       }
+      return;
     }
+
+    // Prefer the visually-containing section (matches Chromium's
+    // delegation + section container `onClick`), fall back to the
+    // closest-by-distance section for clicks on the container padding.
+    const parsedIndex = sectionElement ? Number(sectionElement.dataset.sectionindex) : findClosestSectionIndexToPoint(sectionListRoot, event.clientX);
+    // `Number(undefined) === NaN` and `NaN == null === false`, so guard
+    // explicitly here even though `data-sectionindex` is set by
+    // `useFieldSectionContainerProps` for every section in practice.
+    if (parsedIndex == null || !Number.isInteger(parsedIndex)) {
+      return;
+    }
+    event.preventDefault();
+    setFocused(true);
+    // `mousedown` is now authoritative for pointer section selection. The
+    // section container's own `onClick` deduplicates against the resulting
+    // `parsedSelectedSections` on the click bubble (see
+    // `useFieldSectionContainerProps`), so we always select here and let that
+    // guard absorb the redundant call -- matching the pre-PR
+    // `onSelectedSectionsChange` invocation count.
+    setSelectedSections(parsedIndex);
   });
   const handleInput = (0, _useEventCallback.default)(event => {
     if (!domGetters.isReady() || parsedSelectedSections !== 'all') {
@@ -148,10 +224,61 @@ function useFieldRootProps(parameters) {
     onBlur: handleBlur,
     onFocus: handleFocus,
     onClick: handleClick,
+    onMouseDown: handleMouseDown,
     onPaste: handlePaste,
     onInput: handleInput,
     // Other
     contentEditable: parsedSelectedSections === 'all',
     tabIndex: internalPropsWithDefaults.disabled || parsedSelectedSections === 0 ? -1 : 0 // TODO: Try to set to undefined when there is a section selected.
   };
+}
+
+/**
+ * Slop on each side of the sections, so a click that just misses the outermost
+ * one still selects it. Under half a digit at the default font size.
+ */
+const BLANK_SPACE_TOLERANCE = 4;
+
+/**
+ * Returns `true` when `clientX` sits past the sections on either side.
+ * Horizontal only: a click in the container's vertical padding still belongs to
+ * the section above or below it.
+ */
+function isPointOutsideSections(root, clientX) {
+  const sections = root.querySelectorAll('[data-sectionindex]');
+  if (sections.length === 0) {
+    return false;
+  }
+  let left = Infinity;
+  let right = -Infinity;
+  for (let i = 0; i < sections.length; i += 1) {
+    const rect = sections[i].getBoundingClientRect();
+    left = Math.min(left, rect.left);
+    right = Math.max(right, rect.right);
+  }
+  return clientX < left - BLANK_SPACE_TOLERANCE || clientX > right + BLANK_SPACE_TOLERANCE;
+}
+
+/**
+ * Returns the index of the section whose horizontal center is closest to `clientX`.
+ * Returns `null` if the field renders no `[role="spinbutton"]` descendants
+ * (defensive -- every section content span sets `role="spinbutton"` in practice).
+ */
+function findClosestSectionIndexToPoint(root, clientX) {
+  const sections = root.querySelectorAll('[role="spinbutton"]');
+  if (sections.length === 0) {
+    return null;
+  }
+  let closestIndex = 0;
+  let closestDistance = Infinity;
+  for (let i = 0; i < sections.length; i += 1) {
+    const rect = sections[i].getBoundingClientRect();
+    const center = (rect.left + rect.right) / 2;
+    const distance = Math.abs(clientX - center);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closestIndex = i;
+    }
+  }
+  return closestIndex;
 }

package/internals/hooks/useField/useFieldRootProps.mjs

@@ -44,14 +44,22 @@ export function useFieldRootProps(parameters) {
     stateResponse
   });
   const containerClickTimeout = useTimeout();
-  const handleClick = useEventCallback(event => {
+  const handleClick = useEventCallback(() => {
     if (disabled || !domGetters.isReady()) {
       return;
     }
-    setFocused(true);
     if (parsedSelectedSections === 'all') {
+      setFocused(true);
       containerClickTimeout.start(0, () => {
-        const cursorPosition = document.getSelection().getRangeAt(0).startOffset;
+        // `getSelection`/`getRangeAt` can be unset transiently (e.g. focus
+        // moved before this 0-tick callback ran). Fall back to the first
+        // section in that case.
+        const selection = document.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+          setSelectedSections(sectionOrder.startIndex);
+          return;
+        }
+        const cursorPosition = selection.getRangeAt(0).startOffset;
         if (cursorPosition === 0) {
           setSelectedSections(sectionOrder.startIndex);
           return;
@@ -65,15 +73,83 @@ export function useFieldRootProps(parameters) {
         }
         setSelectedSections(sectionIndex - 1);
       });
-    } else if (!focused) {
+      return;
+    }
+
+    // For trusted pointer input, `handleMouseDown` already ran and set the
+    // section. This branch only matters for `click` events that arrive
+    // without a preceding `mousedown` (programmatic `element.click()`, some
+    // assistive-technology activations, synthetic event sequences in tests).
+    // Fall back to the first section so the field doesn't enter a "focused
+    // but no active section" state.
+    if (!focused) {
       setFocused(true);
-      setSelectedSections(sectionOrder.startIndex);
-    } else {
-      const hasClickedOnASection = domGetters.getRoot().contains(event.target);
-      if (!hasClickedOnASection) {
+      if (parsedSelectedSections == null) {
+        setSelectedSections(sectionOrder.startIndex);
+      }
+    }
+  });
+
+  // Replaces Chromium's focus delegation with an explicit section focus on
+  // every primary mousedown inside the sections container. The CSS gate
+  // (`WebkitUserModify: read-only` while not `:focus-within`) can make the
+  // section's contenteditable span temporarily non-focusable, in which case
+  // Chromium falls back to the sections-container `tabindex=0` and our
+  // `handleFocus` then runs the "no active section" fallback, briefly
+  // selecting the first section before the click bubble corrects it.
+  // Setting the target section here (and letting `syncSelectionToDOM` move
+  // focus via `.focus()`, which works even with the user-modify rule
+  // active) skips that race entirely.
+  const handleMouseDown = useEventCallback(event => {
+    if (disabled || !domGetters.isReady() || parsedSelectedSections === 'all') {
+      return;
+    }
+    if (event.button !== 0) {
+      return;
+    }
+    const target = event.target;
+    const sectionListRoot = domGetters.getRoot();
+    const isInsideSectionList = sectionListRoot.contains(target);
+    // Only the field root is ours outside the sections container: it is the
+    // target of a padding click. The adornments keep their own behavior.
+    if (!isInsideSectionList && target !== event.currentTarget) {
+      return;
+    }
+    const sectionElement = isInsideSectionList ? target.closest('[data-sectionindex]') : null;
+
+    // Blank space is the field padding and the area past the sections. Mimic
+    // the native date input: first section on entry, keep it afterwards.
+    // `preventDefault` is what keeps it, by stopping both the browser blur and
+    // Chromium's focus delegation.
+    const isBlankSpaceClick = sectionElement == null && (!isInsideSectionList || isPointOutsideSections(sectionListRoot, event.clientX));
+    if (isBlankSpaceClick) {
+      event.preventDefault();
+      if (!focused) {
+        setFocused(true);
         setSelectedSections(sectionOrder.startIndex);
       }
+      return;
     }
+
+    // Prefer the visually-containing section (matches Chromium's
+    // delegation + section container `onClick`), fall back to the
+    // closest-by-distance section for clicks on the container padding.
+    const parsedIndex = sectionElement ? Number(sectionElement.dataset.sectionindex) : findClosestSectionIndexToPoint(sectionListRoot, event.clientX);
+    // `Number(undefined) === NaN` and `NaN == null === false`, so guard
+    // explicitly here even though `data-sectionindex` is set by
+    // `useFieldSectionContainerProps` for every section in practice.
+    if (parsedIndex == null || !Number.isInteger(parsedIndex)) {
+      return;
+    }
+    event.preventDefault();
+    setFocused(true);
+    // `mousedown` is now authoritative for pointer section selection. The
+    // section container's own `onClick` deduplicates against the resulting
+    // `parsedSelectedSections` on the click bubble (see
+    // `useFieldSectionContainerProps`), so we always select here and let that
+    // guard absorb the redundant call -- matching the pre-PR
+    // `onSelectedSectionsChange` invocation count.
+    setSelectedSections(parsedIndex);
   });
   const handleInput = useEventCallback(event => {
     if (!domGetters.isReady() || parsedSelectedSections !== 'all') {
@@ -142,10 +218,61 @@ export function useFieldRootProps(parameters) {
     onBlur: handleBlur,
     onFocus: handleFocus,
     onClick: handleClick,
+    onMouseDown: handleMouseDown,
     onPaste: handlePaste,
     onInput: handleInput,
     // Other
     contentEditable: parsedSelectedSections === 'all',
     tabIndex: internalPropsWithDefaults.disabled || parsedSelectedSections === 0 ? -1 : 0 // TODO: Try to set to undefined when there is a section selected.
   };
+}
+
+/**
+ * Slop on each side of the sections, so a click that just misses the outermost
+ * one still selects it. Under half a digit at the default font size.
+ */
+const BLANK_SPACE_TOLERANCE = 4;
+
+/**
+ * Returns `true` when `clientX` sits past the sections on either side.
+ * Horizontal only: a click in the container's vertical padding still belongs to
+ * the section above or below it.
+ */
+function isPointOutsideSections(root, clientX) {
+  const sections = root.querySelectorAll('[data-sectionindex]');
+  if (sections.length === 0) {
+    return false;
+  }
+  let left = Infinity;
+  let right = -Infinity;
+  for (let i = 0; i < sections.length; i += 1) {
+    const rect = sections[i].getBoundingClientRect();
+    left = Math.min(left, rect.left);
+    right = Math.max(right, rect.right);
+  }
+  return clientX < left - BLANK_SPACE_TOLERANCE || clientX > right + BLANK_SPACE_TOLERANCE;
+}
+
+/**
+ * Returns the index of the section whose horizontal center is closest to `clientX`.
+ * Returns `null` if the field renders no `[role="spinbutton"]` descendants
+ * (defensive -- every section content span sets `role="spinbutton"` in practice).
+ */
+function findClosestSectionIndexToPoint(root, clientX) {
+  const sections = root.querySelectorAll('[role="spinbutton"]');
+  if (sections.length === 0) {
+    return null;
+  }
+  let closestIndex = 0;
+  let closestDistance = Infinity;
+  for (let i = 0; i < sections.length; i += 1) {
+    const rect = sections[i].getBoundingClientRect();
+    const center = (rect.left + rect.right) / 2;
+    const distance = Math.abs(clientX - center);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closestIndex = i;
+    }
+  }
+  return closestIndex;
 }

package/internals/hooks/useField/useFieldSectionContainerProps.js

@@ -1,11 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useFieldSectionContainerProps = useFieldSectionContainerProps;
 var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 /**
  * Generate the props to pass to the container element of each section of the field.
  * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
@@ -16,6 +18,8 @@ var React = _interopRequireWildcard(require("react"));
 function useFieldSectionContainerProps(parameters) {
   const {
     stateResponse: {
+      // States and derived states
+      parsedSelectedSections,
       // Methods to update the states
       setSelectedSections
     },
@@ -23,16 +27,31 @@ function useFieldSectionContainerProps(parameters) {
       disabled = false
     }
   } = parameters;
-  const createHandleClick = React.useCallback(sectionIndex => event => {
+
+  // A single stable handler shared by every section, rather than a per-index
+  // factory. The section index is read from the container's `data-sectionindex`
+  // at click time.
+  const handleClick = (0, _useEventCallback.default)(event => {
     // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
     // We avoid this by checking if the call to this function is actually intended, or a side effect.
     if (disabled || event.isDefaultPrevented()) {
       return;
     }
+    const sectionIndex = Number(event.currentTarget.dataset.sectionindex);
+    if (!Number.isInteger(sectionIndex)) {
+      return;
+    }
+
+    // For pointer input the `mousedown` handler already selected the section
+    // before this click bubbles, so bail to avoid a redundant
+    // `onSelectedSectionsChange` invocation.
+    if (parsedSelectedSections === sectionIndex) {
+      return;
+    }
     setSelectedSections(sectionIndex);
-  }, [disabled, setSelectedSections]);
+  });
   return React.useCallback(sectionIndex => ({
     'data-sectionindex': sectionIndex,
-    onClick: createHandleClick(sectionIndex)
-  }), [createHandleClick]);
+    onClick: handleClick
+  }), [handleClick]);
 }

package/internals/hooks/useField/useFieldSectionContainerProps.mjs

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
 /**
  * Generate the props to pass to the container element of each section of the field.
  * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
@@ -9,6 +10,8 @@ import * as React from 'react';
 export function useFieldSectionContainerProps(parameters) {
   const {
     stateResponse: {
+      // States and derived states
+      parsedSelectedSections,
       // Methods to update the states
       setSelectedSections
     },
@@ -16,16 +19,31 @@ export function useFieldSectionContainerProps(parameters) {
       disabled = false
     }
   } = parameters;
-  const createHandleClick = React.useCallback(sectionIndex => event => {
+
+  // A single stable handler shared by every section, rather than a per-index
+  // factory. The section index is read from the container's `data-sectionindex`
+  // at click time.
+  const handleClick = useEventCallback(event => {
     // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
     // We avoid this by checking if the call to this function is actually intended, or a side effect.
     if (disabled || event.isDefaultPrevented()) {
       return;
     }
+    const sectionIndex = Number(event.currentTarget.dataset.sectionindex);
+    if (!Number.isInteger(sectionIndex)) {
+      return;
+    }
+
+    // For pointer input the `mousedown` handler already selected the section
+    // before this click bubbles, so bail to avoid a redundant
+    // `onSelectedSectionsChange` invocation.
+    if (parsedSelectedSections === sectionIndex) {
+      return;
+    }
     setSelectedSections(sectionIndex);
-  }, [disabled, setSelectedSections]);
+  });
   return React.useCallback(sectionIndex => ({
     'data-sectionindex': sectionIndex,
-    onClick: createHandleClick(sectionIndex)
-  }), [createHandleClick]);
+    onClick: handleClick
+  }), [handleClick]);
 }

package/internals/hooks/useField/useFieldSectionContentProps.d.mts

@@ -1,8 +1,8 @@
 import { UseFieldStateReturnValue } from "./useFieldState.mjs";
 import { FieldSection, PickerManager } from "../../../models/index.mjs";
 import { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.mjs";
-import { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.mjs";
-import { PickersSectionElement } from "../../../PickersSectionList/index.mjs";
+import type { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.mjs";
+import type { PickersSectionElement } from "../../../PickersSectionList/index.mjs";
 /**
  * Generate the props to pass to the content element of each section of the field.
  * It is not used by the non-accessible DOM structure (with an <input /> element for editing).

package/internals/hooks/useField/useFieldSectionContentProps.d.ts

@@ -1,8 +1,8 @@
 import { UseFieldStateReturnValue } from "./useFieldState.js";
 import { FieldSection, PickerManager } from "../../../models/index.js";
 import { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.js";
-import { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.js";
-import { PickersSectionElement } from "../../../PickersSectionList/index.js";
+import type { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.js";
+import type { PickersSectionElement } from "../../../PickersSectionList/index.js";
 /**
  * Generate the props to pass to the content element of each section of the field.
  * It is not used by the non-accessible DOM structure (with an <input /> element for editing).

package/internals/hooks/useField/useFieldSectionContentProps.js

@@ -10,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _hooks = require("../../../hooks");
 var _syncSelectionToDOM = require("./syncSelectionToDOM");
+var _useField = require("./useField.utils");
 /**
  * Generate the props to pass to the content element of each section of the field.
  * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
@@ -34,6 +35,7 @@ function useFieldSectionContentProps(parameters) {
       sectionsValueBoundaries,
       state,
       value,
+      localizedDigits,
       // Methods to update the states
       clearActiveSection,
       setCharacterQuery,
@@ -154,10 +156,10 @@ function useFieldSectionContentProps(parameters) {
       onFocus: createFocusHandler(sectionIndex),
       // Aria attributes
       'aria-readonly': readOnly,
-      'aria-valuenow': getSectionValueNow(section, adapter),
+      'aria-valuenow': getSectionValueNow(section, adapter, localizedDigits),
       'aria-valuemin': sectionBoundaries.minimum,
       'aria-valuemax': sectionBoundaries.maximum,
-      'aria-valuetext': section.value ? getSectionValueText(section, adapter) : translations.empty,
+      'aria-valuetext': section.value ? getSectionValueText(section, adapter, localizedDigits) : translations.empty,
       'aria-label': translations[section.type],
       'aria-disabled': disabled,
       // Other
@@ -173,9 +175,9 @@ function useFieldSectionContentProps(parameters) {
       children: section.value || section.placeholder,
       inputMode: section.contentType === 'letter' ? 'text' : 'numeric'
     };
-  }, [sectionsValueBoundaries, isContainerEditable, disabled, readOnly, isEditable, translations, adapter, handleInput, handlePaste, handleMouseUp, handleDragOver, createFocusHandler, fieldValueManager, value]);
+  }, [sectionsValueBoundaries, isContainerEditable, disabled, readOnly, isEditable, translations, adapter, localizedDigits, handleInput, handlePaste, handleMouseUp, handleDragOver, createFocusHandler, fieldValueManager, value]);
 }
-function getSectionValueText(section, adapter) {
+function getSectionValueText(section, adapter, localizedDigits) {
   if (!section.value) {
     return undefined;
   }
@@ -183,7 +185,7 @@ function getSectionValueText(section, adapter) {
     case 'month':
       {
         if (section.contentType === 'digit') {
-          const dateWithMonth = adapter.setMonth(adapter.date(), Number(section.value) - 1);
+          const dateWithMonth = adapter.setMonth(adapter.date(), Number((0, _useField.removeLocalizedDigits)(section.value, localizedDigits)) - 1);
           return adapter.isValid(dateWithMonth) ? adapter.format(dateWithMonth, 'month') : '';
         }
         const parsedDate = adapter.parse(section.value, section.format);
@@ -191,7 +193,7 @@ function getSectionValueText(section, adapter) {
       }
     case 'day':
       if (section.contentType === 'digit') {
-        const dateWithDay = adapter.setDate(adapter.startOfYear(adapter.date()), Number(section.value));
+        const dateWithDay = adapter.setDate(adapter.startOfYear(adapter.date()), Number((0, _useField.removeLocalizedDigits)(section.value, localizedDigits)));
         return adapter.isValid(dateWithDay) ? adapter.format(dateWithDay, 'dayOfMonthFull') : '';
       }
       return section.value;
@@ -202,10 +204,11 @@ function getSectionValueText(section, adapter) {
       return undefined;
   }
 }
-function getSectionValueNow(section, adapter) {
+function getSectionValueNow(section, adapter, localizedDigits) {
   if (!section.value) {
     return undefined;
   }
+  const nonLocalizedValue = (0, _useField.removeLocalizedDigits)(section.value, localizedDigits);
   switch (section.type) {
     case 'weekDay':
       {
@@ -213,7 +216,7 @@ function getSectionValueNow(section, adapter) {
           // TODO: improve by resolving the week day number from a letter week day
           return undefined;
         }
-        return Number(section.value);
+        return Number(nonLocalizedValue);
       }
     case 'meridiem':
       {
@@ -224,16 +227,16 @@ function getSectionValueNow(section, adapter) {
         return undefined;
       }
     case 'day':
-      return section.contentType === 'digit-with-letter' ? parseInt(section.value, 10) : Number(section.value);
+      return section.contentType === 'digit-with-letter' ? parseInt(nonLocalizedValue, 10) : Number(nonLocalizedValue);
     case 'month':
       {
         if (section.contentType === 'digit') {
-          return Number(section.value);
+          return Number(nonLocalizedValue);
         }
         const parsedDate = adapter.parse(section.value, section.format);
         return parsedDate ? adapter.getMonth(parsedDate) + 1 : undefined;
       }
     default:
-      return section.contentType !== 'letter' ? Number(section.value) : undefined;
+      return section.contentType !== 'letter' ? Number(nonLocalizedValue) : undefined;
   }
 }