fix(react): disable no options on select

p3ol · Jan 3, 2023 · c9249b4 · c9249b4
1 parent b6e3a50
commit c9249b4
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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}
+  />
+);