fix(react): prevent clearing selectfield when disabled

p3ol · Sep 29, 2022 · 16025a7 · 16025a7
1 parent 725f3fb
commit 16025a7
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 7 deletions.
diff --git 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
@@ -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
@@ -337,19 +337,39 @@ 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"
       >
         <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
@@ -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)