Added option to ignore disabled for search bar (#12)

Author: lumburovskalina

components/Dropdown2.tsx

@@ -162,10 +162,10 @@ export default function Dropdown2(props: DropdownProps) {
                     }}
                         onFocus={(event) => event.target.select()}
                         className="h-9 w-full text-sm border-gray-300 rounded-md placeholder-italic border text-gray-900 pr-8 pl-4 truncate placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
-                        disabled={isDisabled}
+                        disabled={isDisabled && !props.ignoreDisabledForSearch}
                         placeholder="Type to search..." />
                     <IconChevronDown
-                        className={`h-5 w-5 absolute right-0 mr-3 -mt-7 ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+                        className={`h-5 w-5 absolute right-0 mr-3 -mt-7 ${isDisabled && !props.ignoreDisabledForSearch ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
                         aria-hidden="true"
                     />
                 </div> : <>

types/dropdown.ts

@@ -39,6 +39,7 @@
  * @useFillForIcons {boolean[], optional} - if true, the icon will be filled with the color of the option
  * @searchTextTyped {function} - returns the text typed in the search bar
  * @fontSizeClass {string} - The font size of the dropdown items
+ * @ignoreDisabledForSearch {boolean} - If the search bar should ignore the disabled options
 */
 export type DropdownProps = {
     buttonName?: string;
@@ -83,6 +84,7 @@ export type DropdownProps = {
     searchTextTyped?: (value: string) => void;
     fontSizeClass?: string;
     filteredOptions?: (option: string) => void;
+    ignoreDisabledForSearch?: boolean;
 }
 
 export type AppSelectionDropdownProps = {