@skyscanner/backpack-web 40.2.1 → 40.2.2

package/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest.js

@@ -79,8 +79,23 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
   const originalInputOnPreviewRef = useRef(null);
   const hasInteractedRef = useRef(false);
   const hasLoadedInitiallyRef = useRef(false);
+  const committedSelectionRef = useRef(false);
+  const savedHighlightedIndexRef = useRef(null);
   const suggestionsCount = suggestions.length;
   const hasSuggestions = suggestionsCount > 0;
+  const flattenedSuggestions = multiSection ? suggestions.flatMap(section => getSectionSuggestions?.(section) ?? []) : suggestions;
+  const getTargetHighlightedIndex = (currentHighlightedIndex, isMenuOpening, isArrowKeyNavigation = false) => {
+    if (isMenuOpening && !isArrowKeyNavigation && highlightFirstSuggestion && flattenedSuggestions.length > 0) {
+      return 0;
+    }
+    if (currentHighlightedIndex !== null && currentHighlightedIndex !== undefined && currentHighlightedIndex >= 0) {
+      return currentHighlightedIndex;
+    }
+    if (savedHighlightedIndexRef.current !== null && savedHighlightedIndexRef.current >= 0) {
+      return savedHighlightedIndexRef.current;
+    }
+    return currentHighlightedIndex;
+  };
   function stateReducer(state, actionAndChanges) {
     const {
       changes,
@@ -93,23 +108,30 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
         isOpen: true
       };
     }
+    const isMenuOpening = changes.isOpen === true && state.isOpen === false;
     switch (type) {
       case useCombobox.stateChangeTypes.InputClick:
-        return {
-          ...changes,
-          isOpen: state.isOpen
-        };
+        {
+          const targetHighlightedIndex = getTargetHighlightedIndex(state.highlightedIndex, isMenuOpening);
+          return {
+            ...changes,
+            isOpen: state.isOpen,
+            highlightedIndex: targetHighlightedIndex ?? -1
+          };
+        }
       default:
         {
           const forceOpen = !isDesktop && !!changes.inputValue;
+          const isArrowKeyNavigation = type === useCombobox.stateChangeTypes.InputKeyDownArrowDown || type === useCombobox.stateChangeTypes.InputKeyDownArrowUp;
+          const targetHighlightedIndex = getTargetHighlightedIndex(changes.highlightedIndex, isMenuOpening, isArrowKeyNavigation);
           return {
             ...changes,
-            isOpen: forceOpen ? true : changes.isOpen
+            isOpen: forceOpen ? true : changes.isOpen,
+            highlightedIndex: targetHighlightedIndex ?? changes.highlightedIndex
           };
         }
     }
   }
-  const flattenedSuggestions = multiSection ? suggestions.flatMap(section => getSectionSuggestions?.(section) ?? []) : suggestions;
   const {
     getInputProps,
     getItemProps,
@@ -119,6 +141,7 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
     inputValue,
     isOpen,
     openMenu,
+    selectItem,
     setInputValue
   } = useCombobox({
     stateReducer,
@@ -137,11 +160,13 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
         newValue: newInputValue ?? ''
       });
       if (type === useCombobox.stateChangeTypes.InputChange) {
-        if (newInputValue?.length > 0) {
+        if (newInputValue && newInputValue.length > 0) {
           if (newIsOpen) {
             onSuggestionsFetchRequested(newInputValue);
           }
         } else {
+          // Clear old suggestions before requesting defaults
+          onSuggestionsClearRequested?.();
           onSuggestionsFetchRequested('');
         }
       }
@@ -151,11 +176,14 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
         selectedItem
       } = changes;
       if (selectedItem) {
-        setInputValue(getSuggestionValue(selectedItem));
+        const newValue = getSuggestionValue(selectedItem);
+        setInputValue(newValue);
         originalInputOnPreviewRef.current = null;
+        committedSelectionRef.current = true;
+        hasInteractedRef.current = true;
         onSuggestionSelected?.({
           suggestion: selectedItem,
-          inputValue
+          inputValue: newValue
         });
         if (alwaysRenderSuggestions) {
           // Manually clear suggestions or hide menu
@@ -222,11 +250,11 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
     whileElementsMounted: isDesktop ? autoUpdate : undefined
   });
   useEffect(() => {
-    if (defaultValue) {
-      setInputValue(defaultValue);
-    } else {
-      setInputValue('');
+    // Prevent defaultValue from overwriting input after interaction or selection
+    if (hasInteractedRef.current || committedSelectionRef.current) {
+      return;
     }
+    setInputValue(defaultValue ?? '');
   }, [defaultValue, setInputValue]);
   useEffect(() => {
     if (!isDesktop) {
@@ -244,6 +272,8 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
   useEffect(() => {
     if (highlightedIndex === previousHighlightedIndexRef.current) return;
     previousHighlightedIndexRef.current = highlightedIndex;
+    // Save highlighted index to allow auto-selection on blur
+    savedHighlightedIndexRef.current = highlightedIndex;
     const currentSuggestion = highlightedIndex != null && highlightedIndex >= 0 ? flattenedSuggestions?.[highlightedIndex] ?? null : null;
     if (!currentSuggestion && originalInputOnPreviewRef.current !== null) {
       if ((inputValue ?? '') !== originalInputOnPreviewRef.current) {
@@ -256,22 +286,40 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
     });
   }, [highlightedIndex, flattenedSuggestions, onSuggestionHighlighted, inputValue, setInputValue]);
   const handleInputInteraction = () => {
+    if (isOpen) {
+      if (originalInputOnPreviewRef.current !== null) {
+        originalInputOnPreviewRef.current = null;
+      }
+      return;
+    }
     hasInteractedRef.current = true;
+    // Reset committed selection to allow auto-select on blur
+    committedSelectionRef.current = false;
+
+    // Keep the preview value (from arrow keys) when clicking the input
+    if (originalInputOnPreviewRef.current !== null) {
+      originalInputOnPreviewRef.current = null;
+    }
+    onSuggestionsClearRequested?.();
     if (shouldRenderSuggestions) {
       shouldRenderSuggestions(inputValue);
-      openMenu();
     }
     if (!isOpen && inputValue.length) {
       onSuggestionsFetchRequested(inputValue);
       openMenu();
     } else if (alwaysRenderSuggestions && !inputValue) {
       onSuggestionsFetchRequested('');
+      if (!isOpen) {
+        openMenu();
+      }
+    } else if (!isOpen) {
+      openMenu();
+      onClick?.();
     } else {
       onClick?.();
     }
 
-    // Desktop destination autosuggest lives on the homepage and is "loaded/interacted with" via clicking on it
-    // Every other use case is within a new screen or modal so is interacted with via the user navigating into the modal/new screen
+    // Track desktop homepage interaction (mobile interaction is tracked via modal entry)
     if (isDesktop) {
       onLoad?.(inputValue);
     }
@@ -284,9 +332,13 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
   const clearSuggestions = e => {
     e?.stopPropagation();
     setInputValue('');
+    onSuggestionsClearRequested?.();
+    onSuggestionsFetchRequested('');
+    if (!isOpen) {
+      openMenu();
+    }
     if (alwaysRenderSuggestions) {
       hasLoadedInitiallyRef.current = true;
-      onSuggestionsFetchRequested('');
     }
   };
 
@@ -302,6 +354,11 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
     const isFirst = globalIndex === 0;
     const itemId = sectionId ? `item-${sectionIndex}-${localIndex}` : undefined;
     const isHighlighted = highlightedIndex === globalIndex || highlightFirstSuggestion && isFirst && highlightedIndex === -1;
+
+    // Build stable unique key (prefer entityId/id, fallback to index)
+    const suggestionItem = suggestion;
+    const suggestionId = suggestionItem.entityId ?? suggestionItem.id ?? globalIndex;
+    const suggestionKey = sectionId ? `${sectionId}-${suggestionId}` : `item-${suggestionId}`;
     return /*#__PURE__*/_jsx("li", {
       "aria-labelledby": sectionId && itemId ? `${sectionId} ${itemId}` : undefined,
       ...getItemProps({
@@ -315,7 +372,7 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
         id: itemId,
         children: renderSuggestion(suggestion)
       }) : renderSuggestion(suggestion)
-    }, sectionTitle ? `${sectionTitle}-${getSuggestionValue(suggestion)}` : getSuggestionValue(suggestion));
+    }, suggestionKey);
   });
 
   // renderSections function to render multi-section suggestions
@@ -366,6 +423,7 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
       ...restInputProps
     } = inputProps;
     const {
+      onBlur: downshiftOnBlur,
       ref: downshiftInputRef,
       value,
       ...finalInputProps
@@ -377,7 +435,40 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
       'aria-label': inputAriaLabel,
       className: inputClassName || theme.input,
       ...restInputProps
+    }, {
+      // Suppress the warning because we manually handle the ref
+      suppressRefError: true
     });
+    const handleBlur = e => {
+      // Call Downshift's onBlur first
+      downshiftOnBlur?.(e);
+      // Call original onBlur if provided
+      restInputProps.onBlur?.(e);
+      if (!isDesktop) {
+        return;
+      }
+      if (committedSelectionRef.current) {
+        return;
+      }
+
+      // Auto-select the highlighted suggestion on blur using the saved index
+      const savedIndex = savedHighlightedIndexRef.current;
+      let highlightedSuggestion = null;
+      if (savedIndex != null && savedIndex >= 0 && flattenedSuggestions[savedIndex]) {
+        // User highlighted a specific suggestion with arrow keys
+        highlightedSuggestion = flattenedSuggestions[savedIndex];
+      } else if (highlightFirstSuggestion && flattenedSuggestions.length > 0 && (savedIndex === -1 || savedIndex === null)) {
+        // First suggestion is highlighted by default (highlightFirstSuggestion is true)
+        const [firstSuggestion] = flattenedSuggestions;
+        highlightedSuggestion = firstSuggestion;
+      }
+      if (highlightedSuggestion) {
+        // Use setTimeout to ensure selectItem runs after the blur event completes
+        setTimeout(() => {
+          selectItem(highlightedSuggestion);
+        }, 0);
+      }
+    };
     const setInputRef = node => {
       if (refs.reference?.current === node) return;
 
@@ -390,10 +481,12 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
     };
     if (renderInputComponent) {
       return renderInputComponent({
+        ...finalInputProps,
         ref: setInputRef,
         enterKeyHint,
-        value,
-        ...finalInputProps
+        onBlur: handleBlur,
+        onClear: clearSuggestions,
+        value: inputValue ?? ''
       });
     }
     return /*#__PURE__*/_jsx("div", {
@@ -418,6 +511,7 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
             name: inputName || id,
             id: id,
             ...finalInputProps,
+            onBlur: handleBlur,
             enterKeyHint: enterKeyHint,
             onClear: clearSuggestions
           })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "40.2.1",
+  "version": "40.2.2",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",