Birthday popup: a month passed on the way keeps the day, and the month field keeps the focus with the a11y layer

Two problems in the month field taking the keyboard (#744):

- A month passed on the way to another clamped the day for good: with 31, typing "aug" goes through April and
  left August 30, as "july" did through June, or arrows through a shorter month. The day as it was entered is
  kept apart now; every check clamps from it, and the field shows it again once the month or the year fits it.
- With the a11y layer the months menu took the focus as it opened on the field's focus, so the keys never
  reached the field, and that menu's options are not walked by the menu's arrow keys either.
  createButtonMenuSelect takes activateFocus: false, and the month field keeps the focus and takes the keys
  itself; Escape still closes the menu first.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: morethanwords

src/components/buttonMenuSelect.tsx

@@ -284,6 +284,9 @@ export function createButtonMenuSelect<T>(props: ComponentProps<typeof ButtonMen
   floatingDirection?: FloatingMenuDirection
   floatingOptions?: FloatingMenuPositionOptions & {constrainHeight?: boolean}
   onToggleMenu?: (open: boolean) => void
+  // * false keeps the focus where it is instead of handing it to the menu (the a11y layer does): for a field that
+  // * opens the menu as it gets the focus and takes the keys itself
+  activateFocus?: boolean
   direction: ButtonMenuDirection
 }) {
   type MenuInstance = {
@@ -337,7 +340,8 @@ export function createButtonMenuSelect<T>(props: ComponentProps<typeof ButtonMen
         'direction',
         'floatingDirection',
         'floatingOptions',
-        'onToggleMenu'
+        'onToggleMenu',
+        'activateFocus'
       ])
 
       return <ButtonMenuSelectInner {...innerProps} />
@@ -405,7 +409,7 @@ export function createButtonMenuSelect<T>(props: ComponentProps<typeof ButtonMen
         menu.removeTimeout = undefined;
         removeMenu(menu)
       }, 300);
-    })
+    }, undefined, props.activateFocus)
     opened = true
   }
 

src/components/popups/birthday.tsx

@@ -111,9 +111,11 @@ export default async function showBirthdayPopup(props: {
     const nowMonth = now.getMonth() + 1;
     const nowDay = now.getDate();
 
+    // * the day as it was entered: a month or year too short for it clamps what the field shows, and the next one
+    // * is checked against this, not the clamp (31, then April on the way to August, is August 31)
+    let enteredDay = dayField.value;
     function updateDayInput() {
-      const value = dayField.value;
-      const cleanValue = value.replace(/[^0-9]/g, '');
+      const cleanValue = enteredDay.replace(/[^0-9]/g, '');
       if(!cleanValue) {
         setDay(undefined);
         return;
@@ -133,6 +135,7 @@ export default async function showBirthdayPopup(props: {
         dayField.setValueSilently('1');
         setDay(1);
       } else {
+        if(dayField.value !== enteredDay) dayField.setValueSilently(enteredDay);
         setDay(valueNum);
       }
     }
@@ -182,7 +185,10 @@ export default async function showBirthdayPopup(props: {
       if(option) selectMonth(option);
     }
 
-    dayField.input.addEventListener('input', updateDayInput);
+    dayField.input.addEventListener('input', () => {
+      enteredDay = dayField.value;
+      updateDayInput();
+    });
     monthField.input.addEventListener('beforeinput', (e: InputEvent) => {
       cancelEvent(e);
       if(e.inputType === 'insertText' && e.data) {
@@ -217,6 +223,8 @@ export default async function showBirthdayPopup(props: {
         return availableMonths();
       },
       single: true,
+      // * the field opens it as it gets the focus and takes the keys itself: typing, arrows
+      activateFocus: false,
       optionKey: (v) => v.value.toString(),
       renderOption: (props) => (
         <>