From 77a0ea64737db77c33027d91f32d45ed8b519c30 Mon Sep 17 00:00:00 2001
From: Luke Bennett <hello@lukebennett.com.au>
Date: Mon, 17 Oct 2022 13:50:59 +1100
Subject: [PATCH] Fix animated multi-select width bug

---
 .changeset/plenty-clocks-trade.md                     | 5 +++++
 packages/react-select/src/animated/ValueContainer.tsx | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/plenty-clocks-trade.md

diff --git a/.changeset/plenty-clocks-trade.md b/.changeset/plenty-clocks-trade.md
new file mode 100644
index 0000000000..81e7e28eb6
--- /dev/null
+++ b/.changeset/plenty-clocks-trade.md
@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Fix bug with animated multi-value select width being too wide
diff --git a/packages/react-select/src/animated/ValueContainer.tsx b/packages/react-select/src/animated/ValueContainer.tsx
index ac4b825d54..167e41f560 100644
--- a/packages/react-select/src/animated/ValueContainer.tsx
+++ b/packages/react-select/src/animated/ValueContainer.tsx
@@ -87,7 +87,7 @@ const useIsMultiValueContainer = ({
     ...innerProps,
     style: {
       ...innerProps?.style,
-      display: cssDisplayFlex ? 'flex' : 'grid',
+      display: (isMulti && hasValue) || cssDisplayFlex ? 'flex' : 'grid',
     },
   };