@zendeskgarden/react-dropdowns 9.15.0 → 9.15.2

package/dist/esm/elements/combobox/Combobox.js

@@ -221,9 +221,14 @@ const Combobox = forwardRef(({
     }
     return () => messageProps && setMessageProps(undefined);
   }, [getMessageProps, messageProps, setMessageProps]);
+  const selectionFingerprint = Array.isArray(selection) ? selection.map(o => o.value).join('\0') : selection?.value ?? null;
+  const prevSelectionRef = useRef(selectionFingerprint);
   useEffect(() => {
-    inputRef.current?.scrollIntoView?.();
-  }, [selection]);
+    if (prevSelectionRef.current !== selectionFingerprint) {
+      prevSelectionRef.current = selectionFingerprint;
+      inputRef.current?.scrollIntoView?.();
+    }
+  }, [selectionFingerprint]);
   return React__default.createElement(ComboboxContext.Provider, {
     value: contextValue
   }, React__default.createElement(StyledCombobox, Object.assign({

package/dist/esm/elements/combobox/Listbox.js

@@ -58,6 +58,7 @@ const Listbox = forwardRef(({
   ...props
 }, ref) => {
   const floatingRef = useRef(null);
+  const isMountedRef = useRef(true);
   const [isVisible, setIsVisible] = useState(false);
   const [height, setHeight] = useState();
   const [width, setWidth] = useState();
@@ -80,7 +81,7 @@ const Listbox = forwardRef(({
         rects,
         availableHeight
       }) => {
-        if (rects.reference.width > 0) {
+        if (rects.reference.width > 0 && isMountedRef.current) {
           setWidth(rects.reference.width);
           if (!(minHeight === null || minHeight === 'fit-content') && rects.floating.height > availableHeight) {
             setHeight(availableHeight);
@@ -90,6 +91,9 @@ const Listbox = forwardRef(({
     })]
   });
   const handleMouseDown = event => event.preventDefault();
+  useEffect(() => () => {
+    isMountedRef.current = false;
+  }, []);
   useEffect(() => {
     let cleanup;
     if (isExpanded && refs.reference.current && refs.floating.current) {
@@ -102,18 +106,20 @@ const Listbox = forwardRef(({
   useEffect(() => {
     let timeout;
     if (isExpanded) {
-      setIsVisible(true);
+      if (isMountedRef.current) setIsVisible(true);
     } else {
       timeout = setTimeout(() => {
-        setIsVisible(false);
-        setHeight(undefined);
+        if (isMountedRef.current) {
+          setIsVisible(false);
+          setHeight(undefined);
+        }
       }, 200 );
     }
     return () => clearTimeout(timeout);
   }, [isExpanded]);
   useEffect(() => {
     if (height) {
-      setHeight(undefined);
+      if (isMountedRef.current) setHeight(undefined);
       update();
     }
   }, [

package/dist/esm/elements/combobox/TagGroup.js

@@ -18,11 +18,17 @@ const TagGroup = ({
   selection
 }) => {
   const lastTagRef = useRef(null);
+  const isMountedRef = useRef(false);
+  const selectionFingerprint = selection.map(o => o.value).join('\0');
   useEffect(() => {
-    if (!isEditable) {
-      lastTagRef.current?.scrollIntoView?.();
+    if (isMountedRef.current) {
+      if (!isEditable) {
+        lastTagRef.current?.scrollIntoView?.();
+      }
+    } else {
+      isMountedRef.current = true;
     }
-  }, [isEditable, selection]);
+  }, [isEditable, selectionFingerprint]);
   return React__default.createElement(React__default.Fragment, null, selection.map((option, index) => {
     const disabled = isDisabled || option.disabled;
     return React__default.createElement(Tag, Object.assign({

package/dist/esm/elements/menu/MenuList.js

@@ -8,7 +8,7 @@ import React__default, { forwardRef, useRef, useState, useContext, useEffect } f
 import PropTypes from 'prop-types';
 import { ThemeContext } from 'styled-components';
 import { DEFAULT_THEME, getFloatingPlacements, getMenuPosition, getArrowPosition } from '@zendeskgarden/react-theming';
-import { useFloating, offset, autoPlacement, flip, size, platform, autoUpdate } from '@floating-ui/react-dom';
+import { useFloating, platform, offset, autoPlacement, flip, size, autoUpdate } from '@floating-ui/react-dom';
 import { PLACEMENT } from '../../types/index.js';
 import '../../views/combobox/StyledCombobox.js';
 import '../../views/combobox/StyledContainer.js';
@@ -61,6 +61,7 @@ const MenuList = forwardRef(({
   ...props
 }, ref) => {
   const floatingRef = useRef(null);
+  const isMountedRef = useRef(true);
   const [isVisible, setIsVisible] = useState(isExpanded);
   const [height, setHeight] = useState();
   const theme = useContext(ThemeContext) || DEFAULT_THEME;
@@ -90,13 +91,16 @@ const MenuList = forwardRef(({
         availableHeight
       }) => {
         if (!(minHeight === null || minHeight === 'fit-content')) {
-          if (rects.floating.height > availableHeight) {
+          if (rects.floating.height > availableHeight && isMountedRef.current) {
             setHeight(availableHeight);
           }
         }
       }
     })]
   });
+  useEffect(() => () => {
+    isMountedRef.current = false;
+  }, []);
   useEffect(() => {
     let cleanup;
     if (isExpanded && refs.reference.current && refs.floating.current) {
@@ -109,18 +113,20 @@ const MenuList = forwardRef(({
   useEffect(() => {
     let timeout;
     if (isExpanded) {
-      setIsVisible(true);
+      if (isMountedRef.current) setIsVisible(true);
     } else {
       timeout = setTimeout(() => {
-        setIsVisible(false);
-        setHeight(undefined);
+        if (isMountedRef.current) {
+          setIsVisible(false);
+          setHeight(undefined);
+        }
       }, 200 );
     }
     return () => clearTimeout(timeout);
   }, [isExpanded]);
   useEffect(() => {
     if (height) {
-      setHeight(undefined);
+      if (isMountedRef.current) setHeight(undefined);
       update();
     }
   }, [

package/dist/esm/views/combobox/StyledCombobox.js

@@ -18,7 +18,7 @@ const sizeStyles$b = props => {
 };
 const StyledCombobox = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledCombobox",
   componentId: "sc-13eybg8-0"

package/dist/esm/views/combobox/StyledContainer.js

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID$s = 'dropdowns.combobox.container';
 const StyledContainer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledContainer",
   componentId: "sc-14i9jid-0"

package/dist/esm/views/combobox/StyledField.js

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID$r = 'dropdowns.combobox.field';
 const StyledField = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-zc57xl-0"

package/dist/esm/views/combobox/StyledFloatingListbox.js

@@ -10,7 +10,7 @@ import { menuStyles, componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID$q = 'dropdowns.combobox.floating';
 const StyledFloatingListbox = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledFloatingListbox",
   componentId: "sc-1cp6spf-0"

package/dist/esm/views/combobox/StyledHint.js

@@ -11,7 +11,7 @@ import { Field } from '@zendeskgarden/react-forms';
 const COMPONENT_ID$v = 'dropdowns.combobox.hint';
 const StyledHint = styled(Field.Hint).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-106qvqx-0"

package/dist/esm/views/combobox/StyledInput.js

@@ -34,7 +34,7 @@ const sizeStyles$a = props => {
 };
 const StyledInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-1lkqdg-0"

package/dist/esm/views/combobox/StyledInputGroup.js

@@ -14,7 +14,7 @@ const sizeStyles$9 = props => {
 };
 const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-yx3q7u-0"

package/dist/esm/views/combobox/StyledInputIcon.js

@@ -49,7 +49,7 @@ const sizeStyles$7 = props => {
 };
 const StyledInputIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledInputIcon",
   componentId: "sc-gqbs1s-0"

package/dist/esm/views/combobox/StyledLabel.js

@@ -11,7 +11,7 @@ import { Field } from '@zendeskgarden/react-forms';
 const COMPONENT_ID$w = 'dropdowns.combobox.label';
 const StyledLabel = styled(Field.Label).attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-az6now-0"

package/dist/esm/views/combobox/StyledListbox.js

@@ -18,7 +18,7 @@ const sizeStyles$4 = props => {
 };
 const StyledListbox = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledListbox",
   componentId: "sc-1k13ba7-0"

package/dist/esm/views/combobox/StyledListboxSeparator.js

@@ -24,7 +24,7 @@ const sizeStyles$5 = props => {
 };
 const StyledListboxSeparator = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledListboxSeparator",
   componentId: "sc-1p6toh2-0"

package/dist/esm/views/combobox/StyledMessage.js

@@ -11,7 +11,7 @@ import { Field } from '@zendeskgarden/react-forms';
 const COMPONENT_ID$u = 'dropdowns.combobox.message';
 const StyledMessage = styled(Field.Message).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-jux8m5-0"

package/dist/esm/views/combobox/StyledOptGroup.js

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID$j = 'dropdowns.combobox.optgroup';
 const StyledOptGroup = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledOptGroup",
   componentId: "sc-1kavqsx-0"

package/dist/esm/views/combobox/StyledOption.js

@@ -56,7 +56,7 @@ const sizeStyles$6 = props => {
 };
 const StyledOption = styled.li.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledOption",
   componentId: "sc-jl4wn6-0"

package/dist/esm/views/combobox/StyledOptionContent.js

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID$k = 'dropdowns.combobox.option.content';
 const StyledOptionContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledOptionContent",
   componentId: "sc-121ujpu-0"

package/dist/esm/views/combobox/StyledOptionIcon.js

@@ -38,7 +38,7 @@ const sizeStyles$3 = props => {
 };
 const StyledOptionIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledOptionIcon",
   componentId: "sc-qsab3y-0"

package/dist/esm/views/combobox/StyledOptionMeta.js

@@ -26,7 +26,7 @@ const sizeStyles$2 = props => {
 };
 const StyledOptionMeta = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledOptionMeta",
   componentId: "sc-j6pu10-0"

package/dist/esm/views/combobox/StyledOptionSelectionIcon.js

@@ -34,7 +34,7 @@ const sizeStyles$1 = ({
 };
 const StyledOptionSelectionIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledOptionSelectionIcon",
   componentId: "sc-12wj24m-0"

package/dist/esm/views/combobox/StyledOptionTypeIcon.js

@@ -45,7 +45,7 @@ const sizeStyles = props => {
 };
 const StyledOptionTypeIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledOptionTypeIcon",
   componentId: "sc-xpink2-0"

package/dist/esm/views/combobox/StyledTag.js

@@ -12,7 +12,7 @@ import { Tag } from '@zendeskgarden/react-tags';
 const COMPONENT_ID$c = 'dropdowns.combobox.tag';
 const StyledTag = styled(Tag).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1alam0r-0"

package/dist/esm/views/combobox/StyledTagsButton.js

@@ -21,7 +21,7 @@ const colorStyles = ({
 const StyledTagsButton = styled(StyledValue).attrs({
   as: 'button',
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledTagsButton",
   componentId: "sc-6q5w33-0"

package/dist/esm/views/combobox/StyledTrigger.js

@@ -112,7 +112,7 @@ const sizeStyles$8 = props => {
 };
 const StyledTrigger = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledTrigger",
   componentId: "sc-116nftk-0"

package/dist/esm/views/combobox/StyledValue.js

@@ -21,7 +21,7 @@ const colorStyles$1 = ({
 };
 const StyledValue = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledValue",
   componentId: "sc-t719sx-0"

package/dist/esm/views/menu/StyledFloatingMenu.js

@@ -11,7 +11,7 @@ import { StyledFloatingListbox } from '../combobox/StyledFloatingListbox.js';
 const COMPONENT_ID$8 = 'dropdowns.menu.floating';
 const StyledFloatingMenu = styled(StyledFloatingListbox).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledFloatingMenu",
   componentId: "sc-1rc7ahb-0"

package/dist/esm/views/menu/StyledItem.js

@@ -11,7 +11,7 @@ import { StyledOption } from '../combobox/StyledOption.js';
 const COMPONENT_ID$7 = 'dropdowns.menu.item';
 const StyledItem = styled(StyledOption).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1jp99dq-0"

package/dist/esm/views/menu/StyledItemAnchor.js

@@ -12,7 +12,7 @@ import { StyledOption } from '../combobox/StyledOption.js';
 const COMPONENT_ID$5 = 'dropdowns.menu.item_anchor';
 const StyledItemAnchor = styled(StyledOption).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.15.0',
+  'data-garden-version': '9.15.2',
   as: 'a'
 }).withConfig({
   displayName: "StyledItemAnchor",

package/dist/esm/views/menu/StyledItemContent.js

@@ -11,7 +11,7 @@ import { StyledOptionContent } from '../combobox/StyledOptionContent.js';
 const COMPONENT_ID$4 = 'dropdowns.menu.item.content';
 const StyledItemContent = styled(StyledOptionContent).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledItemContent",
   componentId: "sc-1opglsb-0"

package/dist/esm/views/menu/StyledItemGroup.js

@@ -11,7 +11,7 @@ import { StyledOptGroup } from '../combobox/StyledOptGroup.js';
 const COMPONENT_ID$3 = 'dropdowns.menu.item_group';
 const StyledItemGroup = styled(StyledOptGroup).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledItemGroup",
   componentId: "sc-1umk3cg-0"

package/dist/esm/views/menu/StyledItemIcon.js

@@ -11,7 +11,7 @@ import { StyledOptionIcon } from '../combobox/StyledOptionIcon.js';
 const COMPONENT_ID$2 = 'dropdowns.menu.item.icon';
 const StyledItemIcon = styled(StyledOptionIcon).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-w9orqb-0"

package/dist/esm/views/menu/StyledItemMeta.js

@@ -11,7 +11,7 @@ import { StyledOptionMeta } from '../combobox/StyledOptionMeta.js';
 const COMPONENT_ID$1 = 'dropdowns.menu.item.meta';
 const StyledItemMeta = styled(StyledOptionMeta).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1unw3x1-0"

package/dist/esm/views/menu/StyledItemTypeIcon.js

@@ -12,7 +12,7 @@ import { StyledItem } from './StyledItem.js';
 const COMPONENT_ID$6 = 'dropdowns.menu.item.type_icon';
 const StyledItemTypeIcon = styled(StyledOptionTypeIcon).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledItemTypeIcon",
   componentId: "sc-1pll3nu-0"

package/dist/esm/views/menu/StyledMenu.js

@@ -11,7 +11,7 @@ import { StyledListbox } from '../combobox/StyledListbox.js';
 const COMPONENT_ID$9 = 'dropdowns.menu';
 const StyledMenu = styled(StyledListbox).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-f77ntu-0"

package/dist/esm/views/menu/StyledSeparator.js

@@ -11,7 +11,7 @@ import { StyledListboxSeparator } from '../combobox/StyledListboxSeparator.js';
 const COMPONENT_ID = 'dropdowns.menu.separator';
 const StyledSeparator = styled(StyledListboxSeparator).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-8kqwen-0"

package/dist/index.cjs.js

@@ -83,7 +83,7 @@ const useFieldContext = () => {
 const COMPONENT_ID$w = 'dropdowns.combobox.label';
 const StyledLabel = styled__default.default(reactForms.Field.Label).attrs({
   'data-garden-id': COMPONENT_ID$w,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-az6now-0"
@@ -92,7 +92,7 @@ const StyledLabel = styled__default.default(reactForms.Field.Label).attrs({
 const COMPONENT_ID$v = 'dropdowns.combobox.hint';
 const StyledHint = styled__default.default(reactForms.Field.Hint).attrs({
   'data-garden-id': COMPONENT_ID$v,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledHint",
   componentId: "sc-106qvqx-0"
@@ -101,7 +101,7 @@ const StyledHint = styled__default.default(reactForms.Field.Hint).attrs({
 const COMPONENT_ID$u = 'dropdowns.combobox.message';
 const StyledMessage = styled__default.default(reactForms.Field.Message).attrs({
   'data-garden-id': COMPONENT_ID$u,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-jux8m5-0"
@@ -115,7 +115,7 @@ const sizeStyles$b = props => {
 };
 const StyledCombobox = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$t,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledCombobox",
   componentId: "sc-13eybg8-0"
@@ -124,7 +124,7 @@ const StyledCombobox = styled__default.default.div.attrs({
 const COMPONENT_ID$s = 'dropdowns.combobox.container';
 const StyledContainer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$s,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledContainer",
   componentId: "sc-14i9jid-0"
@@ -133,7 +133,7 @@ const StyledContainer = styled__default.default.div.attrs({
 const COMPONENT_ID$r = 'dropdowns.combobox.field';
 const StyledField = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$r,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledField",
   componentId: "sc-zc57xl-0"
@@ -142,7 +142,7 @@ const StyledField = styled__default.default.div.attrs({
 const COMPONENT_ID$q = 'dropdowns.combobox.floating';
 const StyledFloatingListbox = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$q,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledFloatingListbox",
   componentId: "sc-1cp6spf-0"
@@ -179,7 +179,7 @@ const sizeStyles$a = props => {
 };
 const StyledInput = styled__default.default.input.attrs({
   'data-garden-id': COMPONENT_ID$p,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledInput",
   componentId: "sc-1lkqdg-0"
@@ -192,7 +192,7 @@ const sizeStyles$9 = props => {
 };
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$o,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-yx3q7u-0"
@@ -301,7 +301,7 @@ const sizeStyles$8 = props => {
 };
 const StyledTrigger = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$n,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledTrigger",
   componentId: "sc-116nftk-0"
@@ -346,7 +346,7 @@ const sizeStyles$7 = props => {
 };
 const StyledInputIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledInputIcon",
   componentId: "sc-gqbs1s-0"
@@ -400,7 +400,7 @@ const sizeStyles$6 = props => {
 };
 const StyledOption = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledOption",
   componentId: "sc-jl4wn6-0"
@@ -409,7 +409,7 @@ const StyledOption = styled__default.default.li.attrs({
 const COMPONENT_ID$k = 'dropdowns.combobox.option.content';
 const StyledOptionContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledOptionContent",
   componentId: "sc-121ujpu-0"
@@ -418,7 +418,7 @@ const StyledOptionContent = styled__default.default.div.attrs({
 const COMPONENT_ID$j = 'dropdowns.combobox.optgroup';
 const StyledOptGroup = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledOptGroup",
   componentId: "sc-1kavqsx-0"
@@ -441,7 +441,7 @@ const sizeStyles$5 = props => {
 };
 const StyledListboxSeparator = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledListboxSeparator",
   componentId: "sc-1p6toh2-0"
@@ -455,7 +455,7 @@ const sizeStyles$4 = props => {
 };
 const StyledListbox = styled__default.default.ul.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledListbox",
   componentId: "sc-1k13ba7-0"
@@ -491,7 +491,7 @@ const sizeStyles$3 = props => {
 };
 const StyledOptionIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledOptionIcon",
   componentId: "sc-qsab3y-0"
@@ -516,7 +516,7 @@ const sizeStyles$2 = props => {
 };
 const StyledOptionMeta = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledOptionMeta",
   componentId: "sc-j6pu10-0"
@@ -547,7 +547,7 @@ const sizeStyles$1 = ({
 };
 const StyledOptionSelectionIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledOptionSelectionIcon",
   componentId: "sc-12wj24m-0"
@@ -589,7 +589,7 @@ const sizeStyles = props => {
 };
 const StyledOptionTypeIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledOptionTypeIcon",
   componentId: "sc-xpink2-0"
@@ -598,7 +598,7 @@ const StyledOptionTypeIcon = styled__default.default(reactTheming.StyledBaseIcon
 const COMPONENT_ID$c = 'dropdowns.combobox.tag';
 const StyledTag = styled__default.default(reactTags.Tag).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledTag",
   componentId: "sc-1alam0r-0"
@@ -620,7 +620,7 @@ const colorStyles$1 = ({
 };
 const StyledValue = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledValue",
   componentId: "sc-t719sx-0"
@@ -644,7 +644,7 @@ const colorStyles = ({
 const StyledTagsButton = styled__default.default(StyledValue).attrs({
   as: 'button',
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledTagsButton",
   componentId: "sc-6q5w33-0"
@@ -653,7 +653,7 @@ const StyledTagsButton = styled__default.default(StyledValue).attrs({
 const COMPONENT_ID$9 = 'dropdowns.menu';
 const StyledMenu = styled__default.default(StyledListbox).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-f77ntu-0"
@@ -666,7 +666,7 @@ const StyledMenu = styled__default.default(StyledListbox).attrs({
 const COMPONENT_ID$8 = 'dropdowns.menu.floating';
 const StyledFloatingMenu = styled__default.default(StyledFloatingListbox).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledFloatingMenu",
   componentId: "sc-1rc7ahb-0"
@@ -675,7 +675,7 @@ const StyledFloatingMenu = styled__default.default(StyledFloatingListbox).attrs(
 const COMPONENT_ID$7 = 'dropdowns.menu.item';
 const StyledItem = styled__default.default(StyledOption).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledItem",
   componentId: "sc-1jp99dq-0"
@@ -684,7 +684,7 @@ const StyledItem = styled__default.default(StyledOption).attrs({
 const COMPONENT_ID$6 = 'dropdowns.menu.item.type_icon';
 const StyledItemTypeIcon = styled__default.default(StyledOptionTypeIcon).attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledItemTypeIcon",
   componentId: "sc-1pll3nu-0"
@@ -693,7 +693,7 @@ const StyledItemTypeIcon = styled__default.default(StyledOptionTypeIcon).attrs({
 const COMPONENT_ID$5 = 'dropdowns.menu.item_anchor';
 const StyledItemAnchor = styled__default.default(StyledOption).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.15.0',
+  'data-garden-version': '9.15.2',
   as: 'a'
 }).withConfig({
   displayName: "StyledItemAnchor",
@@ -703,7 +703,7 @@ const StyledItemAnchor = styled__default.default(StyledOption).attrs({
 const COMPONENT_ID$4 = 'dropdowns.menu.item.content';
 const StyledItemContent = styled__default.default(StyledOptionContent).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledItemContent",
   componentId: "sc-1opglsb-0"
@@ -712,7 +712,7 @@ const StyledItemContent = styled__default.default(StyledOptionContent).attrs({
 const COMPONENT_ID$3 = 'dropdowns.menu.item_group';
 const StyledItemGroup = styled__default.default(StyledOptGroup).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledItemGroup",
   componentId: "sc-1umk3cg-0"
@@ -721,7 +721,7 @@ const StyledItemGroup = styled__default.default(StyledOptGroup).attrs({
 const COMPONENT_ID$2 = 'dropdowns.menu.item.icon';
 const StyledItemIcon = styled__default.default(StyledOptionIcon).attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-w9orqb-0"
@@ -730,7 +730,7 @@ const StyledItemIcon = styled__default.default(StyledOptionIcon).attrs({
 const COMPONENT_ID$1 = 'dropdowns.menu.item.meta';
 const StyledItemMeta = styled__default.default(StyledOptionMeta).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1unw3x1-0"
@@ -739,7 +739,7 @@ const StyledItemMeta = styled__default.default(StyledOptionMeta).attrs({
 const COMPONENT_ID = 'dropdowns.menu.separator';
 const StyledSeparator = styled__default.default(StyledListboxSeparator).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.15.0'
+  'data-garden-version': '9.15.2'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-8kqwen-0"
@@ -758,6 +758,7 @@ const Listbox = React.forwardRef(({
   ...props
 }, ref) => {
   const floatingRef = React.useRef(null);
+  const isMountedRef = React.useRef(true);
   const [isVisible, setIsVisible] = React.useState(false);
   const [height, setHeight] = React.useState();
   const [width, setWidth] = React.useState();
@@ -780,7 +781,7 @@ const Listbox = React.forwardRef(({
         rects,
         availableHeight
       }) => {
-        if (rects.reference.width > 0) {
+        if (rects.reference.width > 0 && isMountedRef.current) {
           setWidth(rects.reference.width);
           if (!(minHeight === null || minHeight === 'fit-content') && rects.floating.height > availableHeight) {
             setHeight(availableHeight);
@@ -790,6 +791,9 @@ const Listbox = React.forwardRef(({
     })]
   });
   const handleMouseDown = event => event.preventDefault();
+  React.useEffect(() => () => {
+    isMountedRef.current = false;
+  }, []);
   React.useEffect(() => {
     let cleanup;
     if (isExpanded && refs.reference.current && refs.floating.current) {
@@ -802,18 +806,20 @@ const Listbox = React.forwardRef(({
   React.useEffect(() => {
     let timeout;
     if (isExpanded) {
-      setIsVisible(true);
+      if (isMountedRef.current) setIsVisible(true);
     } else {
       timeout = setTimeout(() => {
-        setIsVisible(false);
-        setHeight(undefined);
+        if (isMountedRef.current) {
+          setIsVisible(false);
+          setHeight(undefined);
+        }
       }, 200 );
     }
     return () => clearTimeout(timeout);
   }, [isExpanded]);
   React.useEffect(() => {
     if (height) {
-      setHeight(undefined);
+      if (isMountedRef.current) setHeight(undefined);
       update();
     }
   }, [
@@ -918,11 +924,17 @@ const TagGroup = ({
   selection
 }) => {
   const lastTagRef = React.useRef(null);
+  const isMountedRef = React.useRef(false);
+  const selectionFingerprint = selection.map(o => o.value).join('\0');
   React.useEffect(() => {
-    if (!isEditable) {
-      lastTagRef.current?.scrollIntoView?.();
+    if (isMountedRef.current) {
+      if (!isEditable) {
+        lastTagRef.current?.scrollIntoView?.();
+      }
+    } else {
+      isMountedRef.current = true;
     }
-  }, [isEditable, selection]);
+  }, [isEditable, selectionFingerprint]);
   return React__namespace.default.createElement(React__namespace.default.Fragment, null, selection.map((option, index) => {
     const disabled = isDisabled || option.disabled;
     return React__namespace.default.createElement(Tag, Object.assign({
@@ -1138,9 +1150,14 @@ const Combobox = React.forwardRef(({
     }
     return () => messageProps && setMessageProps(undefined);
   }, [getMessageProps, messageProps, setMessageProps]);
+  const selectionFingerprint = Array.isArray(selection) ? selection.map(o => o.value).join('\0') : selection?.value ?? null;
+  const prevSelectionRef = React.useRef(selectionFingerprint);
   React.useEffect(() => {
-    inputRef.current?.scrollIntoView?.();
-  }, [selection]);
+    if (prevSelectionRef.current !== selectionFingerprint) {
+      prevSelectionRef.current = selectionFingerprint;
+      inputRef.current?.scrollIntoView?.();
+    }
+  }, [selectionFingerprint]);
   return React__namespace.default.createElement(ComboboxContext.Provider, {
     value: contextValue
   }, React__namespace.default.createElement(StyledCombobox, Object.assign({
@@ -1656,6 +1673,7 @@ const MenuList = React.forwardRef(({
   ...props
 }, ref) => {
   const floatingRef = React.useRef(null);
+  const isMountedRef = React.useRef(true);
   const [isVisible, setIsVisible] = React.useState(isExpanded);
   const [height, setHeight] = React.useState();
   const theme = React.useContext(styled.ThemeContext) || reactTheming.DEFAULT_THEME;
@@ -1685,13 +1703,16 @@ const MenuList = React.forwardRef(({
         availableHeight
       }) => {
         if (!(minHeight === null || minHeight === 'fit-content')) {
-          if (rects.floating.height > availableHeight) {
+          if (rects.floating.height > availableHeight && isMountedRef.current) {
             setHeight(availableHeight);
           }
         }
       }
     })]
   });
+  React.useEffect(() => () => {
+    isMountedRef.current = false;
+  }, []);
   React.useEffect(() => {
     let cleanup;
     if (isExpanded && refs.reference.current && refs.floating.current) {
@@ -1704,18 +1725,20 @@ const MenuList = React.forwardRef(({
   React.useEffect(() => {
     let timeout;
     if (isExpanded) {
-      setIsVisible(true);
+      if (isMountedRef.current) setIsVisible(true);
     } else {
       timeout = setTimeout(() => {
-        setIsVisible(false);
-        setHeight(undefined);
+        if (isMountedRef.current) {
+          setIsVisible(false);
+          setHeight(undefined);
+        }
       }, 200 );
     }
     return () => clearTimeout(timeout);
   }, [isExpanded]);
   React.useEffect(() => {
     if (height) {
-      setHeight(undefined);
+      if (isMountedRef.current) setHeight(undefined);
       update();
     }
   }, [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-dropdowns",
-  "version": "9.15.0",
+  "version": "9.15.2",
   "description": "Components related to dropdowns in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -25,10 +25,10 @@
     "@zendeskgarden/container-combobox": "^2.0.7",
     "@zendeskgarden/container-menu": "^2.0.1",
     "@zendeskgarden/container-utilities": "^2.0.4",
-    "@zendeskgarden/react-buttons": "^9.15.0",
-    "@zendeskgarden/react-forms": "^9.15.0",
-    "@zendeskgarden/react-tags": "^9.15.0",
-    "@zendeskgarden/react-tooltips": "^9.15.0",
+    "@zendeskgarden/react-buttons": "^9.15.2",
+    "@zendeskgarden/react-forms": "^9.15.2",
+    "@zendeskgarden/react-tags": "^9.15.2",
+    "@zendeskgarden/react-tooltips": "^9.15.2",
     "polished": "^4.3.1",
     "prop-types": "^15.7.2",
     "react-merge-refs": "^2.0.0"
@@ -40,7 +40,7 @@
     "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.15.0",
+    "@zendeskgarden/react-theming": "^9.15.2",
     "@zendeskgarden/svg-icons": "7.6.0"
   },
   "keywords": [
@@ -54,5 +54,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "baa74ea378e8b8536f194427712c518fd180ff91"
+  "gitHead": "e48f699853ed87994f1531c280189b5f035a5077"
 }