From c9249b48b94a98fcbc900538fc5868f001aa1781 Mon Sep 17 00:00:00 2001
From: Ugo Stephant <ugo@poool.fr>
Date: Tue, 3 Jan 2023 14:58:57 +0100
Subject: [PATCH] fix(react): disable no options on select

---
 packages/react/lib/SelectField/index.d.ts     |  1 +
 packages/react/lib/SelectField/index.js       | 26 ++++++++++++-------
 .../react/lib/SelectField/index.stories.js    |  8 ++++++
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/packages/react/lib/SelectField/index.d.ts b/packages/react/lib/SelectField/index.d.ts
index a3bc31a03..a31af442d 100644
--- a/packages/react/lib/SelectField/index.d.ts
+++ b/packages/react/lib/SelectField/index.d.ts
@@ -28,6 +28,7 @@ declare interface SelectFieldProps extends React.ComponentPropsWithRef<any> {
   toggleClick?: Boolean;
   keyboardHandler?: Boolean;
   multiple?: Boolean;
+  noOptionsEnabled?: Boolean;
   noOptionsLabel?: String;
   searchable?: Boolean;
   searchMinCharacters?: number;
diff --git a/packages/react/lib/SelectField/index.js b/packages/react/lib/SelectField/index.js
index 7c032f298..b1f184c71 100644
--- a/packages/react/lib/SelectField/index.js
+++ b/packages/react/lib/SelectField/index.js
@@ -41,6 +41,7 @@ const SelectField = forwardRef(({
   clearable = true,
   disabled = false,
   multiple = false,
+  noOptionsEnabled = true,
   noOptionsLabel = 'No options',
   searchable = true,
   searchMinCharacters = 2,
@@ -381,6 +382,10 @@ const SelectField = forwardRef(({
     ))
   ), [state.searchResults, state.value, options, onChange]);
 
+  const hasOptions = useMemo(() => (
+    renderedOptions.length > 0 && renderedOptions.some(o => o !== null)
+  ), [renderedOptions]);
+
   return (
     <Dropdown
       { ...rest }
@@ -449,18 +454,18 @@ const SelectField = forwardRef(({
           </div>
         </div>
       </DropdownToggle>
-      <DropdownMenu
-        animate={animateMenu}
-        className={classNames('select-menu', { searching: state.searching })}
-      >
-        <div className="content">
-          { renderedOptions.length > 0 && renderedOptions.some(o => o !== null)
-            ? renderedOptions
-            : (
+      { (hasOptions || noOptionsEnabled || state.searchResults) && (
+        <DropdownMenu
+          animate={animateMenu}
+          className={classNames('select-menu', { searching: state.searching })}
+        >
+          <div className="content">
+            { hasOptions ? renderedOptions : (
               <div className="no-options">{ noOptionsLabel }</div>
             ) }
-        </div>
-      </DropdownMenu>
+          </div>
+        </DropdownMenu>
+      ) }
     </Dropdown>
   );
 });
@@ -475,6 +480,7 @@ SelectField.propTypes = {
   disabled: PropTypes.bool,
   keyboardHandler: PropTypes.bool,
   multiple: PropTypes.bool,
+  noOptionsEnabled: PropTypes.bool,
   noOptionsLabel: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.node,
diff --git a/packages/react/lib/SelectField/index.stories.js b/packages/react/lib/SelectField/index.stories.js
index 3ed71f1ab..3bef7d928 100644
--- a/packages/react/lib/SelectField/index.stories.js
+++ b/packages/react/lib/SelectField/index.stories.js
@@ -130,3 +130,11 @@ export const withClickOptionsAndKeyboardHandler = () => (
 export const animated = () => (
   <SelectField animateMenu={slideInDownMenu} />
 );
+
+export const noEmpty = () => (
+  <SelectField
+    placeholder="Type a name"
+    noOptionsEnabled={false}
+    animateMenu={slideInDownMenu}
+  />
+);