From 16025a785ff743cb6bfe9ff544136ac9afe904e4 Mon Sep 17 00:00:00 2001
From: Ugo Stephant <ugo@poool.fr>
Date: Thu, 29 Sep 2022 09:47:27 +0200
Subject: [PATCH] fix(react): prevent clearing selectfield when disabled

---
 packages/react/lib/SelectField/index.js       |  3 +-
 .../react/lib/SelectField/index.stories.js    | 10 ++++++
 .../react/lib/SelectField/index.test.js.snap  | 32 +++++++++++++++----
 packages/theme/lib/SelectField.sass           |  7 ++++
 4 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/packages/react/lib/SelectField/index.js b/packages/react/lib/SelectField/index.js
index 052b1ff45..a2ff797e8 100644
--- a/packages/react/lib/SelectField/index.js
+++ b/packages/react/lib/SelectField/index.js
@@ -158,7 +158,7 @@ const SelectField = forwardRef(({
   const onClear = e => {
     e.stopPropagation();
 
-    if (!clearable) {
+    if (!clearable || disabled) {
       return;
     }
 
@@ -415,6 +415,7 @@ const SelectField = forwardRef(({
               onChange={onSearchInputChange}
               ref={searchInputRef}
               autoFocus={autoFocus}
+              disabled={disabled}
               onFocus={onFocus_}
               onBlur={onBlur_}
               onKeyPress={onKeyPress_}
diff --git a/packages/react/lib/SelectField/index.stories.js b/packages/react/lib/SelectField/index.stories.js
index b08532ec2..7386de834 100644
--- a/packages/react/lib/SelectField/index.stories.js
+++ b/packages/react/lib/SelectField/index.stories.js
@@ -21,6 +21,16 @@ export const multiple = () => (
   />
 );
 
+export const disabled = () => (
+  <SelectField
+    placeholder="Type a name"
+    multiple={true}
+    value={['Item 1', 'Item 2']}
+    disabled={true}
+    options={[{ title: 'Group 1', options: ['Item 1', 'Item 2'] }, 'Item 3']}
+  />
+);
+
 export const asyncSearch = () => (
   <SelectField
     placeholder="Type a name"
diff --git a/packages/react/lib/SelectField/index.test.js.snap b/packages/react/lib/SelectField/index.test.js.snap
index 2ec774e7c..f40fbe417 100644
--- a/packages/react/lib/SelectField/index.test.js.snap
+++ b/packages/react/lib/SelectField/index.test.js.snap
@@ -337,9 +337,19 @@ exports[`<SelectField /> should render multiple values 1`] = `
         <span>
           Item 1
         </span>
-        <a
-          class="delete"
-        />
+        <svg
+          class="junipero icon remove"
+          height="10"
+          viewBox="0 0 9 10"
+          width="10"
+        >
+          <path
+            d="M8 1.5L1 8.5"
+          />
+          <path
+            d="M1 1.5L8 8.5"
+          />
+        </svg>
       </span>
       <span
         class="junipero tag info"
@@ -347,9 +357,19 @@ exports[`<SelectField /> should render multiple values 1`] = `
         <span>
           Item 2
         </span>
-        <a
-          class="delete"
-        />
+        <svg
+          class="junipero icon remove"
+          height="10"
+          viewBox="0 0 9 10"
+          width="10"
+        >
+          <path
+            d="M8 1.5L1 8.5"
+          />
+          <path
+            d="M1 1.5L8 8.5"
+          />
+        </svg>
       </span>
       <input
         placeholder="Name"
diff --git a/packages/theme/lib/SelectField.sass b/packages/theme/lib/SelectField.sass
index c4f93f614..3799b118e 100644
--- a/packages/theme/lib/SelectField.sass
+++ b/packages/theme/lib/SelectField.sass
@@ -8,6 +8,13 @@
   display: inline-flex
   width: 250px
 
+  &.disabled
+    opacity: .5
+
+    .field
+      &, &.icon.remove, & .icons .icon.remove
+        cursor: default
+
   &:focus-within,
   &.opened
     --border-color: var(--main-color)