feat: add shouldShowNoOptionsMessage in select picker

Author: eshankvaish

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -206,6 +206,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     isCreatable = false,
     onCreateOption,
     closeMenuOnSelect = false,
+    shouldShowNoOptionsMessage = true,
     ...props
 }: SelectPickerProps<OptionValue, IsMulti>) => {
     const { inputId, required, isDisabled, controlShouldRenderValue = true, value, options } = props
@@ -284,7 +285,11 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
             return <GenericSectionErrorState reload={reloadOptionList} />
         }
 
-        return <p className="m-0 cn-7 fs-13 fw-4 lh-20 py-6 px-8">No options</p>
+        if (shouldShowNoOptionsMessage) {
+            return <p className="m-0 cn-7 fs-13 fw-4 lh-20 py-6 px-8">No options</p>
+        }
+
+        return null
     }
 
     const renderDisabledTippy = (children: ReactElement) => (

src/Shared/Components/SelectPicker/type.ts

@@ -222,6 +222,14 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
          * @default false
          */
         isCreatable?: boolean
+        /**
+         * If false, the no options message is not shown
+         *
+         * Note: Handling for the menu distortion needs to be handled explicitly in this case
+         *
+         * @default true
+         */
+        shouldShowNoOptionsMessage?: boolean
     } & (IsMulti extends true
         ? {
               isMulti: IsMulti | boolean