From 6a079012d879fc58dee242908770e41a14a4bd11 Mon Sep 17 00:00:00 2001
From: Ugo Stephant <ugo@poool.fr>
Date: Mon, 28 Nov 2022 14:33:47 +0100
Subject: [PATCH] fix(react): allow selectfield to not be searchable

---
 packages/react/lib/SelectField/index.js       | 17 ++++--
 .../react/lib/SelectField/index.stories.js    | 12 ++++-
 .../react/lib/SelectField/index.test.js.snap  | 52 +++++++++----------
 3 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/packages/react/lib/SelectField/index.js b/packages/react/lib/SelectField/index.js
index 9c0b8a37d..a8dba5b79 100644
--- a/packages/react/lib/SelectField/index.js
+++ b/packages/react/lib/SelectField/index.js
@@ -40,6 +40,7 @@ const SelectField = forwardRef(({
   disabled = false,
   multiple = false,
   noOptionsLabel = 'No options',
+  searchable = true,
   searchMinCharacters = 2,
   searchThreshold = 400,
   required = false,
@@ -168,10 +169,15 @@ const SelectField = forwardRef(({
     }
 
     state.valid = onValidate(parseValue(state.value), { required, multiple });
+
     onChange_({ close: false, resetSearch: true });
   };
 
   const onSearchInputChange = e => {
+    if (!searchable || disabled) {
+      return;
+    }
+
     dispatch({ search: e.target.value });
   };
 
@@ -181,7 +187,7 @@ const SelectField = forwardRef(({
     if (onSearch) {
       dispatch({ searching: true });
       results = await onSearch(state.search);
-    } else {
+    } else if (searchable) {
       results = filterOptions(state.search);
     }
 
@@ -245,7 +251,7 @@ const SelectField = forwardRef(({
         if (state.selectedItem >= 0) {
           onRemoveOption(state.value[state.selectedItem]);
         } else {
-          dispatch({ selectedItem: state.value.length - 1 });
+          dispatch({ selectedItem: (state.value?.length ?? 0) - 1 });
         }
 
         break;
@@ -254,13 +260,13 @@ const SelectField = forwardRef(({
         if (state.selectedItem > 0) {
           dispatch({ selectedItem: state.selectedItem - 1 });
         } else if (state.selectedItem === -1 && !state.search) {
-          dispatch({ selectedItem: state.value.length - 1 });
+          dispatch({ selectedItem: (state.value?.length ?? 0) - 1 });
         }
 
         break;
 
       case 'ArrowRight':
-        if (state.selectedItem < state.value.length - 1) {
+        if (state.selectedItem < (state.value?.length ?? 0) - 1) {
           dispatch({ selectedItem: state.selectedItem + 1 });
         } else if (state.selectedItem !== -1) {
           dispatch({ selectedItem: -1 });
@@ -379,6 +385,7 @@ const SelectField = forwardRef(({
         state.dirty ? 'dirty' : 'pristine',
         !state.valid && state.dirty ? 'invalid' : 'valid',
         {
+          searchable,
           searching: state.searching,
           empty: isEmpty(),
           focused: state.focused,
@@ -417,7 +424,7 @@ const SelectField = forwardRef(({
               onChange={onSearchInputChange}
               ref={searchInputRef}
               autoFocus={autoFocus}
-              disabled={disabled}
+              disabled={disabled || !searchable}
               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 2a26023ac..874242816 100644
--- a/packages/react/lib/SelectField/index.stories.js
+++ b/packages/react/lib/SelectField/index.stories.js
@@ -25,13 +25,21 @@ export const controlled = () => {
       value={value}
       placeholder="Type a name"
       options={['Item 1', 'Item 2', { title: 'Item 3', value: 'item-3' }]}
-      parseTitle={o => o.title || o}
-      parseValue={o => o.value || o}
+      parseTitle={o => o?.title || o}
+      parseValue={o => o?.value || o}
       onChange={field => setValue(field.value)}
     />
   );
 };
 
+export const notSearchable = () => (
+  <SelectField
+    searchable={false}
+    placeholder="Type a name"
+    options={['Item 1', 'Item 2', 'Item 3']}
+  />
+);
+
 export const autoFocused = () => (
   <SelectField
     autoFocus
diff --git a/packages/react/lib/SelectField/index.test.js.snap b/packages/react/lib/SelectField/index.test.js.snap
index 930ab707f..76420e7ad 100644
--- a/packages/react/lib/SelectField/index.test.js.snap
+++ b/packages/react/lib/SelectField/index.test.js.snap
@@ -3,7 +3,7 @@
 exports[`<SelectField /> should allow arbitrary values 1`] = `
 <div>
   <div
-    class="junipero dropdown select-field dirty valid focused multiple"
+    class="junipero dropdown select-field dirty valid searchable focused multiple"
   >
     <div
       class="field dropdown-toggle"
@@ -78,7 +78,7 @@ exports[`<SelectField /> should allow to be used with a FieldControl 1`] = `
     Name
   </label>
   <div
-    class="junipero dropdown select-field dirty invalid"
+    class="junipero dropdown select-field dirty invalid searchable"
     id="name"
   >
     <div
@@ -132,7 +132,7 @@ exports[`<SelectField /> should allow to be used with a FieldControl 1`] = `
 exports[`<SelectField /> should allow to clear a single value 1`] = `
 <div>
   <div
-    class="junipero dropdown select-field pristine valid"
+    class="junipero dropdown select-field pristine valid searchable"
   >
     <div
       class="field dropdown-toggle"
@@ -180,7 +180,7 @@ exports[`<SelectField /> should allow to clear a single value 1`] = `
 exports[`<SelectField /> should allow to clear a single value 2`] = `
 <div>
   <div
-    class="junipero dropdown select-field dirty valid empty"
+    class="junipero dropdown select-field dirty valid searchable empty"
   >
     <div
       class="field dropdown-toggle"
@@ -216,7 +216,7 @@ exports[`<SelectField /> should allow to clear a single value 2`] = `
 exports[`<SelectField /> should allow to clear multiple values at once 1`] = `
 <div>
   <div
-    class="junipero dropdown select-field pristine valid focused multiple"
+    class="junipero dropdown select-field pristine valid searchable focused multiple"
   >
     <div
       class="field dropdown-toggle"
@@ -305,7 +305,7 @@ exports[`<SelectField /> should allow to clear multiple values at once 1`] = `
 exports[`<SelectField /> should allow to clear multiple values at once 2`] = `
 <div>
   <div
-    class="junipero dropdown select-field dirty valid empty focused multiple"
+    class="junipero dropdown select-field dirty valid searchable empty focused multiple"
   >
     <div
       class="field dropdown-toggle"
@@ -341,7 +341,7 @@ exports[`<SelectField /> should allow to clear multiple values at once 2`] = `
 exports[`<SelectField /> should allow to delete items when hitting backspace 1`] = `
 <div>
   <div
-    class="junipero dropdown opened select-field pristine valid focused multiple"
+    class="junipero dropdown opened select-field pristine valid searchable focused multiple"
   >
     <div
       class="field dropdown-toggle opened"
@@ -471,7 +471,7 @@ exports[`<SelectField /> should allow to delete items when hitting backspace 1`]
 exports[`<SelectField /> should allow to delete items when hitting backspace 2`] = `
 <div>
   <div
-    class="junipero dropdown opened select-field dirty valid focused multiple"
+    class="junipero dropdown opened select-field dirty valid searchable focused multiple"
   >
     <div
       class="field dropdown-toggle opened"
@@ -581,7 +581,7 @@ exports[`<SelectField /> should allow to delete items when hitting backspace 2`]
 exports[`<SelectField /> should allow to delete items when hitting backspace 3`] = `
 <div>
   <div
-    class="junipero dropdown opened select-field dirty valid focused multiple"
+    class="junipero dropdown opened select-field dirty valid searchable focused multiple"
   >
     <div
       class="field dropdown-toggle opened"
@@ -691,7 +691,7 @@ exports[`<SelectField /> should allow to delete items when hitting backspace 3`]
 exports[`<SelectField /> should allow to delete items when hitting backspace 4`] = `
 <div>
   <div
-    class="junipero dropdown opened select-field dirty valid focused multiple"
+    class="junipero dropdown opened select-field dirty valid searchable focused multiple"
   >
     <div
       class="field dropdown-toggle opened"
@@ -801,7 +801,7 @@ exports[`<SelectField /> should allow to delete items when hitting backspace 4`]
 exports[`<SelectField /> should allow to delete items when hitting backspace 5`] = `
 <div>
   <div
-    class="junipero dropdown opened select-field dirty valid focused multiple"
+    class="junipero dropdown opened select-field dirty valid searchable focused multiple"
   >
     <div
       class="field dropdown-toggle opened"
@@ -911,7 +911,7 @@ exports[`<SelectField /> should allow to delete items when hitting backspace 5`]
 exports[`<SelectField /> should allow to delete items when hitting backspace 6`] = `
 <div>
   <div
-    class="junipero dropdown opened select-field dirty valid focused multiple"
+    class="junipero dropdown opened select-field dirty valid searchable focused multiple"
   >
     <div
       class="field dropdown-toggle opened"
@@ -1021,7 +1021,7 @@ exports[`<SelectField /> should allow to delete items when hitting backspace 6`]
 exports[`<SelectField /> should allow to render without a placeholder 1`] = `
 <div>
   <div
-    class="junipero dropdown select-field pristine valid empty"
+    class="junipero dropdown select-field pristine valid searchable empty"
   >
     <div
       class="field dropdown-toggle"
@@ -1056,7 +1056,7 @@ exports[`<SelectField /> should allow to render without a placeholder 1`] = `
 exports[`<SelectField /> should allow to reset the field 1`] = `
 <div>
   <div
-    class="junipero dropdown select-field dirty valid"
+    class="junipero dropdown select-field dirty valid searchable"
   >
     <div
       class="field dropdown-toggle"
@@ -1104,7 +1104,7 @@ exports[`<SelectField /> should allow to reset the field 1`] = `
 exports[`<SelectField /> should allow to reset the field 2`] = `
 <div>
   <div
-    class="junipero dropdown select-field pristine valid"
+    class="junipero dropdown select-field pristine valid searchable"
   >
     <div
       class="field dropdown-toggle"
@@ -1152,7 +1152,7 @@ exports[`<SelectField /> should allow to reset the field 2`] = `
 exports[`<SelectField /> should allow to search for an existing value 1`] = `
 <div>
   <div
-    class="junipero dropdown opened select-field pristine valid empty focused"
+    class="junipero dropdown opened select-field pristine valid searchable empty focused"
   >
     <div
       class="field dropdown-toggle opened"
@@ -1209,7 +1209,7 @@ exports[`<SelectField /> should allow to search for an existing value 1`] = `
 exports[`<SelectField /> should allow to search for an existing value 2`] = `
 <div>
   <div
-    class="junipero dropdown opened select-field pristine valid empty focused"
+    class="junipero dropdown opened select-field pristine valid searchable empty focused"
   >
     <div
       class="field dropdown-toggle opened"
@@ -1280,7 +1280,7 @@ exports[`<SelectField /> should allow to search for an existing value 2`] = `
 exports[`<SelectField /> should allow to search for an external value 1`] = `
 <div>
   <div
-    class="junipero dropdown opened select-field pristine valid empty focused"
+    class="junipero dropdown opened select-field pristine valid searchable empty focused"
   >
     <div
       class="field dropdown-toggle opened"
@@ -1337,7 +1337,7 @@ exports[`<SelectField /> should allow to search for an external value 1`] = `
 exports[`<SelectField /> should allow to search for an external value 2`] = `
 <div>
   <div
-    class="junipero dropdown select-field dirty valid focused"
+    class="junipero dropdown select-field dirty valid searchable focused"
   >
     <div
       class="field dropdown-toggle"
@@ -1389,7 +1389,7 @@ exports[`<SelectField /> should allow to use object options and display custom t
     item-3
   </p>
   <div
-    class="junipero dropdown select-field dirty valid"
+    class="junipero dropdown select-field dirty valid searchable"
   >
     <div
       class="field dropdown-toggle"
@@ -1437,7 +1437,7 @@ exports[`<SelectField /> should allow to use object options and display custom t
 exports[`<SelectField /> should be invalid if validation fails 1`] = `
 <div>
   <div
-    class="junipero dropdown select-field dirty invalid"
+    class="junipero dropdown select-field dirty invalid searchable"
   >
     <div
       class="field dropdown-toggle"
@@ -1485,7 +1485,7 @@ exports[`<SelectField /> should be invalid if validation fails 1`] = `
 exports[`<SelectField /> should not allow to change value when disabled 1`] = `
 <div>
   <div
-    class="junipero dropdown disabled select-field pristine valid"
+    class="junipero dropdown disabled select-field pristine valid searchable"
   >
     <div
       class="field dropdown-toggle"
@@ -1533,7 +1533,7 @@ exports[`<SelectField /> should not allow to change value when disabled 1`] = `
 exports[`<SelectField /> should render 1`] = `
 <div>
   <div
-    class="junipero dropdown opened select-field pristine valid empty focused"
+    class="junipero dropdown opened select-field pristine valid searchable empty focused"
   >
     <div
       class="field dropdown-toggle opened"
@@ -1604,7 +1604,7 @@ exports[`<SelectField /> should render 1`] = `
 exports[`<SelectField /> should render multiple values 1`] = `
 <div>
   <div
-    class="junipero dropdown select-field pristine valid focused multiple"
+    class="junipero dropdown select-field pristine valid searchable focused multiple"
   >
     <div
       class="field dropdown-toggle"
@@ -1693,7 +1693,7 @@ exports[`<SelectField /> should render multiple values 1`] = `
 exports[`<SelectField /> should render multiple values 2`] = `
 <div>
   <div
-    class="junipero dropdown select-field dirty valid focused multiple"
+    class="junipero dropdown select-field dirty valid searchable focused multiple"
   >
     <div
       class="field dropdown-toggle"
@@ -1762,7 +1762,7 @@ exports[`<SelectField /> should render multiple values 2`] = `
 exports[`<SelectField /> should render multiple values 3`] = `
 <div>
   <div
-    class="junipero dropdown select-field dirty valid focused multiple"
+    class="junipero dropdown select-field dirty valid searchable focused multiple"
   >
     <div
       class="field dropdown-toggle"