@moneyforward/mfui-components 3.36.0 → 3.36.1

package/dist/src/DateTimeSelection/MonthPicker/MonthPickerPanel/MonthPickerPanel.js

@@ -30,15 +30,27 @@ export function MonthPickerPanel({ viewingValue, setViewingValue, value, onChang
     const { pendingFocusDate, setPendingFocusDate, baseFormat } = useBasePickerContext();
     const locale = useCalendarLocale();
     const year = viewingValue.getFullYear();
-    // Focus the appropriate month cell (with visible focus ring) when the panel first opens.
+    // Show a visible focus ring on the appropriate month cell when the panel first opens,
+    // without stealing real focus away from the text box (see BasePicker's handlePopoverOpen).
     // Uses a ref so the initial value is captured at mount time, keeping the dep array empty.
     const initialFocusMonthRef = useRef(dayjs(value ?? new Date()).format(baseFormat));
     useLayoutEffect(() => {
         const targetCell = document.querySelector(`[data-mfui-month="${initialFocusMonthRef.current}"]`);
-        if (targetCell && !targetCell.disabled) {
-            targetCell.dataset['focusVisible'] = '';
-            targetCell.addEventListener('blur', () => delete targetCell.dataset['focusVisible'], { once: true });
-        }
+        if (!targetCell || targetCell.disabled)
+            return;
+        targetCell.dataset['focusVisible'] = '';
+        // Since real focus never moves to targetCell, it can never emit a native 'blur' event.
+        // Clear the fake ring the moment real focus lands anywhere else instead.
+        const clearFakeFocusVisible = (event) => {
+            if (event.target !== targetCell) {
+                delete targetCell.dataset['focusVisible'];
+                document.removeEventListener('focusin', clearFakeFocusVisible);
+            }
+        };
+        document.addEventListener('focusin', clearFakeFocusVisible);
+        return () => {
+            document.removeEventListener('focusin', clearFakeFocusVisible);
+        };
     }, []);
     // Calculate if year navigation should be disabled based on min/max constraints
     const { isPreviousYearDisabled, isNextYearDisabled } = useMemo(() => {

package/dist/src/DateTimeSelection/shared/BasePicker/BasePicker.js

@@ -122,8 +122,10 @@ function InternalPopover({ value, defaultValue, initialViewingDate, textBoxRef,
             !isClickOnClearButton;
         if (isClickOnTextBox || isClickOnWrapper)
             return;
-        // Get the date to focus on: selected value → initialViewingDate → today
-        const dateToFocus = dayjs(value ?? defaultValue ?? initialViewingDate ?? new Date())
+        // Get the date to focus on: currently selected value (controlled or uncontrolled) → initialViewingDate → today.
+        // `pickerPopoverProps.value` reflects the live selection in both modes; the raw `value`/`defaultValue`
+        // props only ever reflect the external controlled value or the original mount-time default.
+        const dateToFocus = dayjs(pickerPopoverProps.value ?? value ?? defaultValue ?? initialViewingDate ?? new Date())
             .startOf('day')
             .toDate();
         const formattedDate = dayjs(dateToFocus).format(baseFormat);
@@ -131,7 +133,17 @@ function InternalPopover({ value, defaultValue, initialViewingDate, textBoxRef,
         setViewingValue(dayjs(dateToFocus).startOf('month').startOf('day').toDate());
         // Set the pending focus date to ensure proper focus after month change
         setPendingFocusDate(formattedDate);
-    }, [textBoxRef, triggerRef, value, defaultValue, initialViewingDate, baseFormat, setViewingValue, setPendingFocusDate]);
+    }, [
+        textBoxRef,
+        triggerRef,
+        pickerPopoverProps.value,
+        value,
+        defaultValue,
+        initialViewingDate,
+        baseFormat,
+        setViewingValue,
+        setPendingFocusDate,
+    ]);
     return (_jsx(Popover, { enableAutomaticPortalTargetResolution: true, enableViewportConstraint: enableViewportConstraint ?? false, enableAutoFocusOnPopover: false, ...popoverProps, renderContent: () => (_jsx("div", { ref: basePickerPopoverWrapperRef, className: "mfui-BasePicker__popoverWrapper", onKeyDown: handleOnKeyDown, children: renderPopoverContent({
                 viewingValue,
                 setViewingValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneyforward/mfui-components",
-  "version": "3.36.0",
+  "version": "3.36.1",
   "description": "React UI Component Library for all Money Forward products",
   "repository": {
     "type": "git",