@sproutsocial/seeds-react-menu 1.7.12 → 1.7.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.7.12",
+  "version": "1.7.13",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

package/src/v2/Autocomplete/MultiAutocomplete.tsx

@@ -1,6 +1,5 @@
 import { useState, useMemo } from "react";
 import { useCombobox, useMultipleSelection } from "downshift";
-import { Label } from "@sproutsocial/seeds-react-label";
 import { TokenInput } from "@sproutsocial/seeds-react-token-input";
 // This will eventually be imported from seeds-react-popout
 import { Popout } from "../Common-V2";
@@ -26,6 +25,14 @@ function defaultReducer(state, actionAndChanges) {
   const { changes, type } = actionAndChanges;
 
   switch (type) {
+    case useCombobox.stateChangeTypes.InputBlur:
+      // Do not close the menu on blur from this event
+      // There is a very brief blur when clicking an item, even though the input seemingly does not lose focus
+      // Closing the menu is handled in the onBlur handler instead, which does not have this issue
+      return {
+        ...changes,
+        isOpen: true,
+      };
     case useCombobox.stateChangeTypes.InputKeyDownEnter:
     case useCombobox.stateChangeTypes.ItemClick:
       // If the item is already selected, don't set highlighted index to 0
@@ -264,7 +271,6 @@ export function MultiAutocomplete<T extends DataWithId>({
                 // Select all items
                 updateSelectedItems([...data]);
               }
-              updateInputValue("");
             } else if (
               selectHeadings &&
               groupBy &&
@@ -292,7 +298,6 @@ export function MultiAutocomplete<T extends DataWithId>({
                 ];
                 updateSelectedItems(newItems);
               }
-              updateInputValue("");
             } else if (
               !isGroupHeading(newSelectedItem) &&
               !isToggleItem(newSelectedItem)
@@ -308,7 +313,6 @@ export function MultiAutocomplete<T extends DataWithId>({
               } else {
                 updateSelectedItems([...selectedItems, newSelectedItem as T]);
               }
-              updateInputValue("");
             }
           }
           break;
@@ -356,6 +360,8 @@ export function MultiAutocomplete<T extends DataWithId>({
     if (inputProps.onBlur) {
       inputProps.onBlur(e);
     }
+    // Need to figure why onblur is getting called when selecting select all item
+    updateIsOpen(false);
   };
 
   const inputPropsToSpread = { ...inputProps };
@@ -399,7 +405,7 @@ export function MultiAutocomplete<T extends DataWithId>({
               };
             }
             const dataItem = item as T;
-            // Find the index in itemsForCombobox
+            // Find the index in itemsForCombobox by comparing keys
             const itemIndex = itemsForCombobox.indexOf(dataItem);
             if (itemIndex === -1) {
               return {};
@@ -424,7 +430,6 @@ export function MultiAutocomplete<T extends DataWithId>({
         />
       }
     >
-      {/* @ts-expect-error onClick types to not match tokeninput */}
       <TokenInput
         placeholder={placeholder}
         inputProps={{
@@ -447,6 +452,11 @@ export function MultiAutocomplete<T extends DataWithId>({
           e.stopPropagation();
         }}
         onBlur={handleBlur}
+        aria-controls={undefined}
+        aria-expanded={undefined}
+        aria-haspopup={undefined}
+        // @ts-expect-error Popout adds the type=button prop but TokenInput does not expect that
+        type={undefined}
       />
     </Popout>
   );

package/src/v2/Autocomplete/SingleAutocomplete.tsx

@@ -7,6 +7,7 @@ import { Input } from "@sproutsocial/seeds-react-input";
 import { Popout } from "../Common-V2";
 import {
   isGroupHeading,
+  isToggleItem,
   menuAnimationConfig,
   getFilteredItems,
   groupItemsWithHeadings,
@@ -96,19 +97,22 @@ export function SingleAutocomplete<T extends DataWithId>({
   const isIsOpenControlled = controlledIsOpen !== undefined;
   const isOpen = isIsOpenControlled ? controlledIsOpen : uncontrolledIsOpen;
 
-  // TODO: This does not actually update the input value when the selected item changes externally
-  // Sync inputValue with selectedItem when selectedItem changes externally and inputValue is not controlled
+  // Sync inputValue with selectedItem when selectedItem changes externally and menu is closed
   useEffect(() => {
     if (selectedItem && !isOpen) {
       // Only update if menu is closed - when open, user might be typing
       const selectedItemString = itemToString(selectedItem);
-      if (
-        !isInputValueControlled &&
-        uncontrolledInputValue !== selectedItemString
-      ) {
-        setUncontrolledInputValue(selectedItemString);
-      } else if (isInputValueControlled && inputValue !== selectedItemString) {
-        updateInputValue(selectedItemString);
+      if (!isInputValueControlled) {
+        // For uncontrolled input, update internal state
+        if (uncontrolledInputValue !== selectedItemString) {
+          setUncontrolledInputValue(selectedItemString);
+        }
+      } else {
+        // For controlled input, notify parent if value doesn't match
+        // Parent is responsible for updating the controlled inputValue
+        if (inputValue !== selectedItemString) {
+          onInputValueChange?.(selectedItemString);
+        }
       }
     }
   }, [
@@ -117,6 +121,8 @@ export function SingleAutocomplete<T extends DataWithId>({
     isInputValueControlled,
     itemToString,
     uncontrolledInputValue,
+    inputValue,
+    onInputValueChange,
   ]);
 
   const updateSelectedItem = (newSelectedItem: T | null) => {
@@ -218,10 +224,7 @@ export function SingleAutocomplete<T extends DataWithId>({
       isOpen: newIsOpen,
     }) {
       // Handle isOpen changes for any state change type
-      if (
-        newIsOpen !== undefined &&
-        type !== useCombobox.stateChangeTypes.InputBlur
-      ) {
+      if (newIsOpen !== undefined) {
         updateIsOpen(newIsOpen);
       }
 
@@ -284,15 +287,6 @@ export function SingleAutocomplete<T extends DataWithId>({
   }
   const { ref, id: inputId, ...restProps } = inputProps as any;
 
-  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    // Call any provided onBlur handler
-    if (inputProps.onBlur) {
-      inputProps.onBlur(e);
-    }
-    // Close the menu on blur
-    updateIsOpen(false);
-  };
-
   return (
     <Popout
       open={comboboxIsOpen}
@@ -314,8 +308,13 @@ export function SingleAutocomplete<T extends DataWithId>({
             // Only apply getItemProps to actual items, not headings or ToggleItems
             const item = items[props.index];
             const dataItem = item as T;
-            // Find the index in itemsForCombobox
-            const itemIndex = itemsForCombobox.indexOf(dataItem);
+            // Find the index in itemsForCombobox using itemToKey for safer comparison
+            const itemIndex = itemsForCombobox.findIndex((comboboxItem) => {
+              if (isToggleItem(comboboxItem)) {
+                return false;
+              }
+              return itemToKey(comboboxItem as T) === itemToKey(dataItem);
+            });
             if (itemIndex === -1) {
               return {};
             }
@@ -340,9 +339,7 @@ export function SingleAutocomplete<T extends DataWithId>({
       <Input
         id={id}
         inputProps={{
-          ...restProps,
           autoComplete: "off",
-          onBlur: handleBlur,
         }}
         innerRef={ref}
         placeholder={placeholder}
@@ -355,7 +352,6 @@ export function SingleAutocomplete<T extends DataWithId>({
           updateInputValue("");
         }}
         {...restProps}
-        onBlur={handleBlur}
       />
     </Popout>
   );

package/src/v2/Common-V2/Popout.tsx

@@ -78,7 +78,9 @@ export function Popout({
       <Popover.Trigger ref={radixRef} asChild>
         {children}
       </Popover.Trigger>
-      <Popover.Anchor />
+      <Popover.Anchor>
+        <div style={{ height: "1px" }}>&nbsp;</div>
+      </Popover.Anchor>
       <Popover.Portal>
         <StyledContent
           side={side}

package/src/v2/Select/MultiSelect.tsx

@@ -367,8 +367,13 @@ export function MultiSelect<T extends DataWithId>({
               };
             }
             const dataItem = item as T;
-            // Find the index in itemsForSelect
-            const itemIndex = itemsForSelect.indexOf(dataItem);
+            // Find the index in itemsForSelect using itemToKey for safer comparison
+            const itemIndex = itemsForSelect.findIndex((selectItem) => {
+              if (isGroupHeading(selectItem) || isToggleItem(selectItem)) {
+                return false;
+              }
+              return itemToKey(selectItem as T) === itemToKey(dataItem);
+            });
             if (itemIndex === -1) {
               return {};
             }

package/src/v2/Select/SingleSelect.tsx

@@ -239,8 +239,13 @@ export function SingleSelect<T extends DataWithId>({
               };
             }
             const dataItem = item as T;
-            // Find the index in itemsForSelect
-            const itemIndex = itemsForSelect.indexOf(dataItem);
+            // Find the index in itemsForSelect using itemToKey for safer comparison
+            const itemIndex = itemsForSelect.findIndex((selectItem) => {
+              if (isToggleItem(selectItem)) {
+                return false;
+              }
+              return itemToKey(selectItem as T) === itemToKey(dataItem);
+            });
             if (itemIndex === -1) {
               return {};
             }