From 2a1321c8132fc583d74d1669ea5185b78556a72f Mon Sep 17 00:00:00 2001
From: Paul <paul@payloadcms.com>
Date: Mon, 7 Oct 2024 10:36:15 -0600
Subject: [PATCH] fix(ui): add unstyled prop to react-select so that payload
 styles take priority (#8572)

Adds `unstyled={true}` prop to the react-select element so that
payload's styles take priority. Due to the way react-select adds its own
styles (injected into the page) they were higher specificity due to not
being in a layer.

Fixes this bug with our styles' specificity not being applied

![image](https://github.com/user-attachments/assets/1cd216a4-8125-4312-949e-168c7eb96186)


Also fixes https://github.com/payloadcms/payload/issues/8507
---
 packages/ui/src/elements/ReactSelect/index.scss | 2 +-
 packages/ui/src/elements/ReactSelect/index.tsx  | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/elements/ReactSelect/index.scss b/packages/ui/src/elements/ReactSelect/index.scss
index 60cc186ee..4d13427d8 100644
--- a/packages/ui/src/elements/ReactSelect/index.scss
+++ b/packages/ui/src/elements/ReactSelect/index.scss
@@ -8,7 +8,6 @@
   .react-select {
     .rs__control {
       @include formInput;
-      height: auto;
       padding: base(0.4) base(0.6);
       flex-wrap: nowrap;
     }
@@ -45,6 +44,7 @@
     .rs__group-heading {
       color: var(--theme-elevation-800);
       padding-left: base(0.5);
+      margin-top: base(0.25);
       margin-bottom: base(0.25);
     }
 
diff --git a/packages/ui/src/elements/ReactSelect/index.tsx b/packages/ui/src/elements/ReactSelect/index.tsx
index 4d364dc34..f37fe4e3d 100644
--- a/packages/ui/src/elements/ReactSelect/index.tsx
+++ b/packages/ui/src/elements/ReactSelect/index.tsx
@@ -106,6 +106,7 @@ const SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {
         onMenuClose={onMenuClose}
         onMenuOpen={onMenuOpen}
         options={options}
+        unstyled={true}
         value={value}
       />
     )