Enhancement: ignore diacritics, support multiple substring matching for UI filtering (#13021)

src-ui/jest.config.js

@@ -26,7 +26,7 @@ module.exports = {
     'abstract-paperless-service',
   ],
   transformIgnorePatterns: [
-    'node_modules/(?!.*(\\.mjs$|tslib|lodash-es|@angular/common/locales/.*\\.js$))',
+    'node_modules/(?!.*(\\.mjs$|tslib|lodash-es|normalize-diacritics|@angular/common/locales/.*\\.js$))',
   ],
   moduleNameMapper: {
     ...esmPreset.moduleNameMapper,

src-ui/package.json

@@ -32,6 +32,7 @@
     "ngx-cookie-service": "^21.3.1",
     "ngx-device-detector": "^11.0.0",
     "ngx-ui-tour-ng-bootstrap": "^18.0.0",
+    "normalize-diacritics": "^5.0.0",
     "pdfjs-dist": "^5.7.284",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1",

src-ui/pnpm-lock.yaml

@@ -71,6 +71,9 @@ importers:
       ngx-ui-tour-ng-bootstrap:
         specifier: ^18.0.0
         version: 18.0.0(f910a33494d223bd6dd07ce1bf22a35e)
+      normalize-diacritics:
+        specifier: ^5.0.0
+        version: 5.0.0
       pdfjs-dist:
         specifier: ^5.7.284
         version: 5.7.284
@@ -5516,6 +5519,10 @@ packages:
     engines: {node: ^20.17.0 || >=22.9.0}
     hasBin: true
 
+  normalize-diacritics@5.0.0:
+    resolution: {integrity: sha512-t6czCJOpbAtckN1wCC2qPWnO3GQvNANb9bcUNbiOLEqojVuP31+ELIs5KhEG8jyz0TH7iD9BWxWz8O3ic2/rMQ==}
+    engines: {node: '>= 14.x', npm: '>= 6.x'}
+
   normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
@@ -12931,6 +12938,10 @@ snapshots:
     dependencies:
       abbrev: 4.0.0
 
+  normalize-diacritics@5.0.0:
+    dependencies:
+      tslib: 2.8.1
+
   normalize-path@3.0.0: {}
 
   npm-bundled@5.0.0:

src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts

@@ -23,6 +23,7 @@ import {
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { pngxPopperOptions } from 'src/app/utils/popper-options'
+import { matchesSearchText } from 'src/app/utils/text-search'
 import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 
@@ -69,9 +70,7 @@ export class CustomFieldsDropdownComponent extends LoadingComponentWithPermissio
 
   public get filteredFields(): CustomField[] {
     return this.unusedFields.filter(
-      (f) =>
-        !this.filterText ||
-        f.name.toLowerCase().includes(this.filterText.toLowerCase())
+      (f) => !this.filterText || matchesSearchText(f.name, this.filterText)
     )
   }
 

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html

@@ -63,6 +63,7 @@
       [(ngModel)]="atom.value"
       [disabled]="disabled"
       [virtualScroll]="getSelectOptionsForField(atom.field)?.length > 100"
+      [searchFn]="selectOptionSearchFn"
       (mousedown)="$event.stopImmediatePropagation()"
     ></ng-select>
   } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.DocumentLink) {
@@ -81,6 +82,7 @@
       [disabled]="disabled"
       bindLabel="name"
       bindValue="id"
+      [searchFn]="customFieldSearchFn"
       (mousedown)="$event.stopImmediatePropagation()"
     ></ng-select>
     <select class="w-25 form-select" [(ngModel)]="atom.operator" [disabled]="disabled">
@@ -125,6 +127,7 @@
           [(ngModel)]="atom.value"
           [disabled]="disabled"
           [multiple]="true"
+          [searchFn]="selectOptionSearchFn"
           (mousedown)="$event.stopImmediatePropagation()"
         ></ng-select>
       }

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts

@@ -36,6 +36,7 @@ import {
   CustomFieldQueryExpression,
 } from 'src/app/utils/custom-field-query-element'
 import { pngxPopperOptions } from 'src/app/utils/popper-options'
+import { matchesSearchText } from 'src/app/utils/text-search'
 import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
 import { DocumentLinkComponent } from '../input/document-link/document-link.component'
@@ -281,6 +282,14 @@ export class CustomFieldsQueryDropdownComponent extends LoadingComponentWithPerm
 
   public readonly today: string = new Date().toLocaleDateString('en-CA')
 
+  public customFieldSearchFn = (term: string, field: CustomField): boolean =>
+    matchesSearchText(field?.name, term)
+
+  public selectOptionSearchFn = (
+    term: string,
+    option: { id: string; label: string }
+  ): boolean => matchesSearchText(option?.label, term)
+
   constructor() {
     super()
     this.selectionModel = new CustomFieldQueriesModel()

src-ui/src/app/components/common/input/select/select.component.html

@@ -28,6 +28,7 @@
           [notFoundText]="notFoundText"
           [multiple]="multiple"
           [bindLabel]="bindLabel"
+          [searchFn]="searchFn"
           bindValue="id"
           [virtualScroll]="items?.length > 100"
           (change)="onChange(value)"

src-ui/src/app/components/common/input/select/select.component.spec.ts

@@ -112,6 +112,15 @@ describe('SelectComponent', () => {
     expect(createNewVal).toEqual('baz')
   })
 
+  it('should search items by independent normalized terms', () => {
+    expect(
+      component.searchFn('tax 26', { id: 11, name: 'Tax\u00e9s 2026' })
+    ).toBeTruthy()
+    expect(
+      component.searchFn('tax receipt', { id: 11, name: 'Tax\u00e9s 2026' })
+    ).toBeFalsy()
+  })
+
   it('should clear search term on blur after delay', fakeAsync(() => {
     const clearSpy = jest.spyOn(component, 'clearLastSearchTerm')
     component.onBlur()

src-ui/src/app/components/common/input/select/select.component.ts

@@ -13,6 +13,7 @@ import {
 import { RouterModule } from '@angular/router'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { matchesSearchText } from 'src/app/utils/text-search'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -99,6 +100,9 @@ export class SelectComponent extends AbstractInputComponent<number> {
   @Input()
   bindLabel: string = 'name'
 
+  public searchFn = (term: string, item: any): boolean =>
+    matchesSearchText(item?.[this.bindLabel], term)
+
   @Input()
   showFilter: boolean = false
 

src-ui/src/app/components/common/input/tags/tags.component.html

@@ -14,6 +14,7 @@
           [clearSearchOnAdd]="true"
           [hideSelected]="tags.length > 0"
           [addTag]="allowCreate ? createTagRef : false"
+          [searchFn]="searchFn"
           addTagText="Add tag"
           i18n-addTagText
           (add)="onAdd($event)"

src-ui/src/app/components/common/input/tags/tags.component.spec.ts

@@ -171,6 +171,15 @@ describe('TagsComponent', () => {
     expect(component.getTag(4)).toBeUndefined()
   })
 
+  it('should search tags by independent normalized terms including parents', () => {
+    const parent: Tag = { id: 11, name: 'Financ\u00e9' }
+    const child: Tag = { id: 12, name: 'Taxes 2026', parent: parent.id }
+    component.tags = [parent, child]
+
+    expect(component.searchFn('finance 26', child)).toBeTruthy()
+    expect(component.searchFn('finance receipt', child)).toBeFalsy()
+  })
+
   it('should emit filtered documents', () => {
     component.value = [10]
     component.tags = tags

src-ui/src/app/components/common/input/tags/tags.component.ts

@@ -21,6 +21,7 @@ import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { first, firstValueFrom, tap } from 'rxjs'
 import { Tag } from 'src/app/data/tag'
 import { TagService } from 'src/app/services/rest/tag.service'
+import { matchesSearchText } from 'src/app/utils/text-search'
 import { EditDialogMode } from '../../edit-dialog/edit-dialog.component'
 import { TagEditDialogComponent } from '../../edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
 import { TagComponent } from '../../tag/tag.component'
@@ -114,6 +115,14 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
 
   public createTagRef: (name) => void
 
+  public searchFn = (term: string, tag: Tag): boolean =>
+    matchesSearchText(
+      [this.getParentChain(tag?.id).map((parent) => parent.name), tag?.name]
+        .flat()
+        .join(' '),
+      term
+    )
+
   getTag(id: number) {
     if (this.tags) {
       return this.tags.find((tag) => tag.id == id)

src-ui/src/app/pipes/filter.pipe.ts

@@ -1,5 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core'
 import { MatchingModel } from '../data/matching-model'
+import { matchesSearchText } from '../utils/text-search'
 
 @Pipe({
   name: 'filter',
@@ -21,9 +22,7 @@ export class FilterPipe implements PipeTransform {
               typeof item[key] === 'string' || typeof item[key] === 'number'
           )
       return keys.some((key) => {
-        return String(item[key])
-          .toLowerCase()
-          .includes(searchText.toLowerCase())
+        return matchesSearchText(item[key], searchText)
       })
     })
   }

src-ui/src/app/utils/text-search.spec.ts

@@ -0,0 +1,17 @@
+import { matchesSearchText } from './text-search'
+
+describe('text search utilities', () => {
+  it('matches text accent-insensitively', () => {
+    expect(matchesSearchText('R\u00e9sum\u00e9', 'resume')).toBeTruthy()
+    expect(matchesSearchText('S\u00f8ren', 'soren')).toBeTruthy()
+    expect(matchesSearchText('\u0152uvre', 'oeuvre')).toBeTruthy()
+    expect(matchesSearchText('Invoice', 'receipt')).toBeFalsy()
+  })
+
+  it('matches all whitespace-separated search terms independently', () => {
+    expect(matchesSearchText('taxes 2026', 'tax 26')).toBeTruthy()
+    expect(matchesSearchText('2026 taxes', 'tax 26')).toBeTruthy()
+    expect(matchesSearchText('Tax\u00e9s 2026', 'taxe 26')).toBeTruthy()
+    expect(matchesSearchText('taxes 2026', 'tax receipt')).toBeFalsy()
+  })
+})

src-ui/src/app/utils/text-search.ts

@@ -0,0 +1,23 @@
+import { normalizeSync } from 'normalize-diacritics'
+
+export type SearchTextValue =
+  | string
+  | number
+  | boolean
+  | bigint
+  | null
+  | undefined
+
+export function normalizeSearchText(value: SearchTextValue): string {
+  return normalizeSync(String(value ?? '')).toLocaleLowerCase()
+}
+
+export function matchesSearchText(
+  value: SearchTextValue,
+  searchText: SearchTextValue
+): boolean {
+  const normalizedValue = normalizeSearchText(value)
+  const searchTerms = normalizeSearchText(searchText).trim().split(/\s+/)
+
+  return searchTerms.every((term) => normalizedValue.includes(term))
+}