added custom filter to dropdown etc. for better search (#2933)

Author: bjosttveit

src/layout/Dropdown/DropdownComponent.tsx

@@ -16,6 +16,7 @@ import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper'
 import comboboxClasses from 'src/styles/combobox.module.css';
 import { useLabel } from 'src/utils/layout/useLabel';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
+import { optionSearchFilter } from 'src/utils/options';
 import type { PropsFromGenericComponent } from 'src/layout';
 
 export type IDropdownProps = PropsFromGenericComponent<'Dropdown'>;
@@ -84,6 +85,7 @@ export function DropdownComponent({ node, overrideDisplay }: IDropdownProps) {
         <ComponentStructureWrapper node={node}>
           <Combobox
             id={id}
+            filter={optionSearchFilter}
             size='sm'
             hideLabel={true}
             value={selectedValues}

src/layout/FileUploadWithTag/EditWindowComponent.tsx

@@ -20,6 +20,7 @@ import { useFileTableRow } from 'src/layout/FileUpload/FileUploadTable/FileTable
 import classes from 'src/layout/FileUploadWithTag/EditWindowComponent.module.css';
 import comboboxClasses from 'src/styles/combobox.module.css';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
+import { optionSearchFilter } from 'src/utils/options';
 import type { IAttachment } from 'src/features/attachments';
 import type { IOptionInternal } from 'src/features/options/castOptionsToStrings';
 import type { PropsFromGenericComponent } from 'src/layout';
@@ -169,6 +170,7 @@ export function EditWindowComponent({
             >
               <Combobox
                 id={`attachment-tag-dropdown-${uniqueId}`}
+                filter={optionSearchFilter}
                 size='sm'
                 hideLabel={true}
                 label={langAsString('general.choose')}

src/layout/MultipleSelect/MultipleSelectComponent.tsx

@@ -17,6 +17,7 @@ import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper'
 import comboboxClasses from 'src/styles/combobox.module.css';
 import { useLabel } from 'src/utils/layout/useLabel';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
+import { optionSearchFilter } from 'src/utils/options';
 import type { PropsFromGenericComponent } from 'src/layout';
 
 export type IMultipleSelectProps = PropsFromGenericComponent<'MultipleSelect'>;
@@ -86,6 +87,7 @@ export function MultipleSelectComponent({ node, overrideDisplay }: IMultipleSele
             multiple
             hideLabel
             id={id}
+            filter={optionSearchFilter}
             size='sm'
             value={selectedValues}
             readOnly={readOnly}

src/utils/options.ts

@@ -1,3 +1,5 @@
+import type { Option } from '@digdir/designsystemet-react/dist/types/components/form/Combobox/useCombobox';
+
 import type { IOptionInternal } from 'src/features/options/castOptionsToStrings';
 
 const emptyArray: IOptionInternal[] = [];
@@ -110,3 +112,11 @@ function logIncludesComma(option: IOptionInternal) {
     JSON.stringify(o, null, 2),
   );
 }
+
+export function optionSearchFilter(inputValue: string, option: Option): boolean {
+  const search = inputValue.toLowerCase();
+  const label = option.label.toLowerCase();
+  const desc = option.description?.toLowerCase();
+
+  return label.includes(search) || (!!desc && desc.includes(search));
+}