[pickers] Fix spurious onBlur/onFocus firing during field focus transitions (#22098)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: LukasTy

packages/x-date-pickers/src/DateField/tests/DateField.test.tsx

@@ -1,3 +1,4 @@
+import { spy } from 'sinon';
 import InputAdornment, { InputAdornmentProps } from '@mui/material/InputAdornment';
 import { DateField } from '@mui/x-date-pickers/DateField';
 import { screen } from '@mui/internal-test-utils';
@@ -40,6 +41,69 @@ describe('<DateField />', () => {
     });
   });
 
+  describe('slotProps.textField focus/blur behavior', () => {
+    it('should not call `slotProps.textField.onBlur` when focus enters the field via tab', async () => {
+      const onBlur = spy();
+      const view = render(<DateField slotProps={{ textField: { onBlur } }} />);
+
+      // Tabbing into the field moves focus to the PickersSectionList root (tabIndex=0)
+      // first, then programmatically to section 0. The transient root blur must not
+      // dispatch the user's onBlur callback.
+      await view.user.tab();
+
+      expect(onBlur.callCount).to.equal(0);
+    });
+
+    it('should call `slotProps.textField.onFocus` only once when focus enters the field via tab', async () => {
+      const onFocus = spy();
+      const view = render(<DateField slotProps={{ textField: { onFocus } }} />);
+
+      // Tabbing into the field fires a focus on the root and then on section 0.
+      // Only the first focus (from outside the field) should reach the user.
+      await view.user.tab();
+
+      expect(onFocus.callCount).to.equal(1);
+    });
+
+    it('should call `slotProps.textField.onFocus` only once when focus is applied programmatically via autoFocus', () => {
+      const onFocus = spy();
+      // `autoFocus` triggers a programmatic `.focus()` on section 0 from a mount effect,
+      // which can produce a focus event with `relatedTarget === null`. The user callback
+      // must still fire exactly once.
+      render(<DateField autoFocus slotProps={{ textField: { onFocus } }} />);
+
+      expect(onFocus.callCount).to.equal(1);
+    });
+
+    it('should call `slotProps.textField.onBlur` when focus leaves the field via tab', async () => {
+      const onBlur = spy();
+      const view = render(<DateField slotProps={{ textField: { onBlur } }} />);
+
+      await view.user.tab();
+      expect(onBlur.callCount).to.equal(0);
+
+      // Tab out of the field (to the document body or next focusable).
+      await view.user.tab();
+      expect(onBlur.callCount).to.equal(1);
+    });
+
+    it('should not fire `slotProps.textField.onBlur` or `onFocus` when focus moves between sections', async () => {
+      const onBlur = spy();
+      const onFocus = spy();
+      const view = render(<DateField slotProps={{ textField: { onBlur, onFocus } }} />);
+
+      await view.user.tab();
+      const blurCallCountAfterTabIn = onBlur.callCount;
+      const focusCallCountAfterTabIn = onFocus.callCount;
+
+      // Navigate across sections inside the field.
+      await view.user.keyboard('[ArrowRight][ArrowRight][ArrowLeft]');
+
+      expect(onBlur.callCount).to.equal(blurCallCountAfterTabIn);
+      expect(onFocus.callCount).to.equal(focusCallCountAfterTabIn);
+    });
+  });
+
   describe('slotProps.inputAdornment behavior', () => {
     function CustomInputAdornment(props: InputAdornmentProps) {
       const { children, ...other } = props;

packages/x-date-pickers/src/internals/hooks/useField/useField.ts

@@ -163,13 +163,30 @@ export const useField = <
   });
 
   const handleRootBlur = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {
-    onBlur?.(event);
     rootProps.onBlur(event);
+    // Skip the user callback when focus is only moving to another element inside the field
+    // (e.g. the section that gains focus after the focusable root gives it up).
+    const next = event.relatedTarget;
+    if (domGetters.isReady() && next instanceof Node && domGetters.getRoot().contains(next)) {
+      return;
+    }
+    onBlur?.(event);
   });
 
   const handleRootFocus = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {
-    onFocus?.(event);
     rootProps.onFocus(event);
+    // Skip the user callback when focus is only arriving from another element inside the field
+    // (e.g. the focusable root receiving it before it is forwarded to a section, and the section
+    // focus event bubbling back up to the root).
+    const previous = event.relatedTarget;
+    if (
+      domGetters.isReady() &&
+      previous instanceof Node &&
+      domGetters.getRoot().contains(previous)
+    ) {
+      return;
+    }
+    onFocus?.(event);
   });
 
   const handleRootClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {