From f6ae30762a42900097ec5b61a32eb9010f2b6d8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B8rnar=20=C3=98sttveit?= <bjosttveit@gmail.com>
Date: Tue, 21 Jan 2025 16:19:44 +0100
Subject: [PATCH] added custom filter to dropdown etc. for better search

---
 src/layout/Dropdown/DropdownComponent.tsx             |  2 ++
 src/layout/FileUploadWithTag/EditWindowComponent.tsx  |  2 ++
 src/layout/MultipleSelect/MultipleSelectComponent.tsx |  2 ++
 src/utils/options.ts                                  | 10 ++++++++++
 4 files changed, 16 insertions(+)

diff --git a/src/layout/Dropdown/DropdownComponent.tsx b/src/layout/Dropdown/DropdownComponent.tsx
index 11ea58e6d4..7032610d98 100644
--- a/src/layout/Dropdown/DropdownComponent.tsx
+++ b/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}
diff --git a/src/layout/FileUploadWithTag/EditWindowComponent.tsx b/src/layout/FileUploadWithTag/EditWindowComponent.tsx
index e75bb13cdd..3d04a3cb69 100644
--- a/src/layout/FileUploadWithTag/EditWindowComponent.tsx
+++ b/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')}
diff --git a/src/layout/MultipleSelect/MultipleSelectComponent.tsx b/src/layout/MultipleSelect/MultipleSelectComponent.tsx
index d9f80642ba..2a5310ce61 100644
--- a/src/layout/MultipleSelect/MultipleSelectComponent.tsx
+++ b/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}
diff --git a/src/utils/options.ts b/src/utils/options.ts
index faf57d5c1f..18e69449eb 100644
--- a/src/utils/options.ts
+++ b/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));
+}