@lumx/react 4.17.0-next.0 → 4.17.0-next.1

package/index.js

@@ -6377,7 +6377,7 @@ function setupListbox(handle, signal, notify, options) {
       wrap: options?.wrapNavigation,
       getActiveItem: () => {
         const id = trigger.getAttribute('aria-activedescendant');
-        return id ? document.getElementById(id) : null;
+        return id && listbox.querySelector(`#${CSS.escape(id)}`) || null;
       }
     }, focusCallbacks, signal);
   }
@@ -6399,11 +6399,6 @@ function setupListbox(handle, signal, notify, options) {
     }
     handle.select(cell);
     trigger.focus();
-
-    // In multi-select mode, keep visual focus on the selected option
-    if (!handle.isMultiSelect) {
-      handle.setIsOpen(false);
-    }
   }, {
     signal
   });
@@ -6593,10 +6588,6 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
             if (!isOptionDisabled(activeItem)) {
               activeItem.click();
             }
-            // Only close when not in multi select and not in action cell
-            if (!handle.isMultiSelect && !isActionCell(activeItem)) {
-              handle.setIsOpen(false);
-            }
             flag = true;
           } else if (handle.isOpen && !handle.isMultiSelect) {
             // Open with no active item (single select) => close the popup,
@@ -6751,6 +6742,15 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
       callbacks.onSelect?.({
         value: option ? getOptionValue(option) : ''
       });
+
+      // Close on selection (when not multiselectable)
+      if (option && !handle.isMultiSelect) {
+        handle.focusNav?.clear();
+        // Defer the close to the next frame (to make sure all other click handler resolve).
+        requestAnimationFrame(() => {
+          handle.setIsOpen(false);
+        });
+      }
     },
     flushPendingNavigation() {
       // Do navigations actions we could not do because the combobox items were not mounted yet
@@ -7349,7 +7349,8 @@ function setupComboboxInput(input, options) {
   let handle;
   const {
     filter = 'auto',
-    onSelect: optionOnSelect
+    onSelect: optionOnSelect,
+    onInput: onInputCallback
   } = options;
   const openOnFocus = options.openOnFocus ?? filter === 'off';
   const autoFilter = filter === 'auto';
@@ -7366,18 +7367,11 @@ function setupComboboxInput(input, options) {
 
   /**
    * Wraps the consumer's onSelect to perform input-mode side effects after selection:
-   * clears the active descendant, resets the filter, and re-opens the popup.
+   * resets the filter and typing state.
    */
   const onSelect = option => {
     optionOnSelect?.(option);
-
-    // Clear the active item. In multi-select, keep visual focus so the
-    // user can continue navigating after selection.
-    if (!handle.isMultiSelect) {
-      handle.focusNav?.clear();
-    }
     userHasTyped = false;
-    handle.setIsOpen(true);
     if (autoFilter) {
       handle.setFilter('');
     }
@@ -7397,6 +7391,9 @@ function setupComboboxInput(input, options) {
       if (isDisabled()) return;
       combobox.focusNav?.clear();
       userHasTyped = true;
+
+      // Notify the framework wrapper of the new input value synchronously.
+      onInputCallback?.(input.value);
       combobox.setIsOpen(true);
       if (autoFilter) {
         combobox.setFilter(input.value);
@@ -8141,6 +8138,10 @@ const ComboboxInput = forwardRef((props, ref) => {
         onChangeRef.current?.(option.value);
         onSelectRef.current?.(option);
       },
+      onInput(value) {
+        // Keep controlled value in sync.
+        onChangeRef.current?.(value);
+      },
       filter,
       openOnFocus
     });