From 6c5e2f35d407435cb3271375e337e69b55bb2952 Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Sun, 10 Nov 2024 17:34:09 +0100
Subject: [PATCH] Fix react select error state

---
 rdmo/core/assets/scss/style.scss                            | 4 ++++
 rdmo/projects/assets/js/interview/components/main/Search.js | 5 +++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/rdmo/core/assets/scss/style.scss b/rdmo/core/assets/scss/style.scss
index 63c217557..f64ab6347 100644
--- a/rdmo/core/assets/scss/style.scss
+++ b/rdmo/core/assets/scss/style.scss
@@ -496,3 +496,7 @@ li.has-warning > a.control-label > i {
     color: $link-color;
     cursor: pointer;
 }
+
+.has-error .react-select__control {
+    border-color: #a94442;
+}
diff --git a/rdmo/projects/assets/js/interview/components/main/Search.js b/rdmo/projects/assets/js/interview/components/main/Search.js
index 191eb2aaf..047ffa301 100644
--- a/rdmo/projects/assets/js/interview/components/main/Search.js
+++ b/rdmo/projects/assets/js/interview/components/main/Search.js
@@ -55,6 +55,7 @@ const Search = ({ attribute, values, setValues, collection = false }) => {
     <AsyncSelect
       key={JSON.stringify(values.project)}
       classNamePrefix="react-select"
+      className='react-select'
       placeholder={gettext('Search for project or snapshot title, or answer text ...')}
       noOptionsMessage={() => gettext(
         'No answers match your search.'
@@ -85,8 +86,8 @@ const Search = ({ attribute, values, setValues, collection = false }) => {
     />
 
     <AsyncSelect
-      classNamePrefix="react-select"
-      className="mt-10"
+      classNamePrefix='react-select'
+      className='react-select mt-10'
       placeholder={gettext('Restrict the search to a particular project ...')}
       noOptionsMessage={() => gettext(
         'No projects matche your search.'