Fix react select error state

rdmorganiser · Nov 10, 2024 · 6c5e2f3 · 6c5e2f3
1 parent 40208cd
commit 6c5e2f3
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git 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
@@ -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.'