Add the clear to permissions dropdown

Add a couple e2e tests just in case
CSS fixes
2026-09-03 08:27:15 +00:00 · 2026-09-02 20:27:32 -07:00 · 2026-09-02 20:27:32 -07:00 · 2026-09-02 20:27:32 -07:00 · 2026-09-02 20:27:31 -07:00 · 2026-09-02 20:27:31 -07:00
22 changed files with 712 additions and 762 deletions
@@ -48,6 +48,7 @@ def seed_database() -> None:
    from django.utils import timezone

    from documents.models import Correspondent
+    from documents.models import CustomField
    from documents.models import Document
    from documents.models import DocumentType
    from documents.models import Note
@@ -81,6 +82,16 @@ def seed_database() -> None:
        path="e2e/{created_year}/{title}",
        owner=admin,
    )
+    CustomField.objects.create(
+        name="Test Select Field",
+        data_type=CustomField.FieldDataType.SELECT,
+        extra_data={
+            "select_options": [
+                {"id": "abc123", "label": "Alpha"},
+                {"id": "def456", "label": "Beta"},
+            ],
+        },
+    )

    today = timezone.localdate()
    documents = []
@@ -207,3 +207,41 @@ test('bulk edit', async ({ page }) => {
  await page.getByRole('button', { name: 'Confirm' }).click()
  await bulkEditPromise
 })
+
+test('permissions dropdown stays open when selecting a user', async ({
+  page,
+}) => {
+  await page.goto('/documents')
+  await page.getByRole('button', { name: 'Permissions' }).click()
+  const dropdown = page.locator(
+    'pngx-permissions-filter-dropdown .dropdown-menu'
+  )
+  await expect(dropdown).toBeVisible()
+  await dropdown.locator('ng-select').click()
+  await page.getByRole('option', { name: 'playwright' }).click()
+  await expect(dropdown).toBeVisible()
+  await expect(dropdown.locator('.ng-value-label')).toHaveText('playwright')
+})
+
+test('custom fields query dropdown stays open when building a query', async ({
+  page,
+}) => {
+  await page.goto('/documents')
+  await page.getByRole('button', { name: 'Custom fields' }).click()
+  const dropdown = page.locator(
+    'pngx-custom-fields-query-dropdown .dropdown-menu'
+  )
+  await expect(dropdown).toBeVisible()
+
+  // field picker
+  await dropdown.locator('ng-select').first().click()
+  await page.getByRole('option', { name: 'Test Select Field' }).click()
+  await expect(dropdown).toBeVisible()
+
+  // value picker, shown once the operator takes a list of options
+  await dropdown.locator('select').first().selectOption({ label: 'In' })
+  await dropdown.locator('ng-select').last().click()
+  await page.getByRole('option', { name: 'Alpha' }).click()
+  await expect(dropdown).toBeVisible()
+  await expect(dropdown.locator('.ng-value-label').last()).toHaveText('Alpha')
+})
@@ -5,14 +5,14 @@
      <trans-unit id="ngb.alert.close" datatype="html">
        <source>Close</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/alert/alert.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/alert/alert.ts</context>
          <context context-type="linenumber">39</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.carousel.slide-number" datatype="html">
        <source> Slide <x id="INTERPOLATION"/> of <x id="INTERPOLATION_1"/> </source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/carousel/carousel.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/carousel/carousel.ts</context>
          <context context-type="linenumber">129</context>
        </context-group>
        <note priority="1" from="description">Currently selected slide number read by screen reader</note>
@@ -20,219 +20,219 @@
      <trans-unit id="ngb.carousel.previous" datatype="html">
        <source>Previous</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/carousel/carousel.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/carousel/carousel.ts</context>
          <context context-type="linenumber">147,148</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.carousel.next" datatype="html">
        <source>Next</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/carousel/carousel.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/carousel/carousel.ts</context>
          <context context-type="linenumber">187</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.datepicker.select-month" datatype="html">
        <source>Select month</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/datepicker/datepicker-navigation-select.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/datepicker/datepicker-navigation-select.ts</context>
          <context context-type="linenumber">89</context>
        </context-group>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/datepicker/datepicker-navigation-select.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/datepicker/datepicker-navigation-select.ts</context>
          <context context-type="linenumber">89</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.datepicker.select-year" datatype="html">
        <source>Select year</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/datepicker/datepicker-navigation-select.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/datepicker/datepicker-navigation-select.ts</context>
          <context context-type="linenumber">89</context>
        </context-group>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/datepicker/datepicker-navigation-select.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/datepicker/datepicker-navigation-select.ts</context>
          <context context-type="linenumber">89</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.datepicker.previous-month" datatype="html">
        <source>Previous month</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/datepicker/datepicker-navigation.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/datepicker/datepicker-navigation.ts</context>
          <context context-type="linenumber">74,76</context>
        </context-group>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/datepicker/datepicker-navigation.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/datepicker/datepicker-navigation.ts</context>
          <context context-type="linenumber">103</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.datepicker.next-month" datatype="html">
        <source>Next month</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/datepicker/datepicker-navigation.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/datepicker/datepicker-navigation.ts</context>
          <context context-type="linenumber">103</context>
        </context-group>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/datepicker/datepicker-navigation.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/datepicker/datepicker-navigation.ts</context>
          <context context-type="linenumber">103</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.pagination.first" datatype="html">
        <source>««</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/pagination/pagination.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/pagination/pagination.ts</context>
          <context context-type="linenumber">297</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.pagination.previous" datatype="html">
        <source>«</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/pagination/pagination.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/pagination/pagination.ts</context>
          <context context-type="linenumber">322</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.pagination.next" datatype="html">
        <source>»</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/pagination/pagination.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/pagination/pagination.ts</context>
          <context context-type="linenumber">358</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.pagination.last" datatype="html">
        <source>»»</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/pagination/pagination.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/pagination/pagination.ts</context>
          <context context-type="linenumber">396</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.pagination.first-aria" datatype="html">
        <source>First</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/pagination/pagination.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/pagination/pagination.ts</context>
          <context context-type="linenumber">414,415</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.pagination.previous-aria" datatype="html">
        <source>Previous</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/pagination/pagination.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/pagination/pagination.ts</context>
          <context context-type="linenumber">444,445</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.pagination.next-aria" datatype="html">
        <source>Next</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/pagination/pagination.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/pagination/pagination.ts</context>
          <context context-type="linenumber">479,480</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.pagination.last-aria" datatype="html">
        <source>Last</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/pagination/pagination.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/pagination/pagination.ts</context>
          <context context-type="linenumber">506</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.progressbar.value" datatype="html">
        <source><x id="INTERPOLATION"/></source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/progressbar/progressbar.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/progressbar/progressbar.ts</context>
          <context context-type="linenumber">40</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.HH" datatype="html">
        <source>HH</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">256,259</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.hours" datatype="html">
        <source>Hours</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">293,295</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.MM" datatype="html">
        <source>MM</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">322</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.minutes" datatype="html">
        <source>Minutes</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">360</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.increment-hours" datatype="html">
        <source>Increment hours</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">397,399</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.decrement-hours" datatype="html">
        <source>Decrement hours</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">435,438</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.increment-minutes" datatype="html">
        <source>Increment minutes</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">442</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.decrement-minutes" datatype="html">
        <source>Decrement minutes</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">442</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.SS" datatype="html">
        <source>SS</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">442</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.seconds" datatype="html">
        <source>Seconds</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">442</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.increment-seconds" datatype="html">
        <source>Increment seconds</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">442</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.decrement-seconds" datatype="html">
        <source>Decrement seconds</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">442</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.timepicker.PM" datatype="html">
        <source><x id="INTERPOLATION"/></source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/timepicker/timepicker.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/timepicker/timepicker.ts</context>
          <context context-type="linenumber">442</context>
        </context-group>
      </trans-unit>
      <trans-unit id="ngb.toast.close-aria" datatype="html">
        <source>Close</source>
        <context-group purpose="location">
-          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.1_@angular+core@22.1.1_@angular+_69897756b3f091add524dceba470da9d/node_modules/src/toast/toast.ts</context>
+          <context context-type="sourcefile">node_modules/.pnpm/@ng-bootstrap+ng-bootstrap@21.0.0_@angular+common@22.1.3_@angular+core@22.1.3_@angular+_6e980a1a1b6a042b5112673ade17a76b/node_modules/src/toast/toast.ts</context>
          <context context-type="linenumber">110,112</context>
        </context-group>
      </trans-unit>
@@ -775,7 +775,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">19,20</context>
+          <context context-type="linenumber">20,21</context>
        </context-group>
      </trans-unit>
      <trans-unit id="3894950702316166331" datatype="html">
@@ -788,10 +788,6 @@
          <context context-type="sourcefile">src/app/components/admin/logs/logs.component.html</context>
          <context context-type="linenumber">49</context>
        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">26,29</context>
-        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/trash/trash.component.html</context>
          <context context-type="linenumber">47</context>
@@ -1854,7 +1850,7 @@
        <source>Clear selection</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">9</context>
+          <context context-type="linenumber">10</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/trash/trash.component.html</context>
@@ -1869,14 +1865,14 @@
        <source>Dismiss all</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">15</context>
+          <context context-type="linenumber">16</context>
        </context-group>
      </trans-unit>
      <trans-unit id="1616102757855967475" datatype="html">
        <source>All</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">39</context>
+          <context context-type="linenumber">35</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.ts</context>
@@ -1915,14 +1911,14 @@
        <source>Filter by</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">55</context>
        </context-group>
      </trans-unit>
      <trans-unit id="424356320420294719" datatype="html">
        <source>All types</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">64,65</context>
+          <context context-type="linenumber">60,61</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.ts</context>
@@ -1933,7 +1929,7 @@
        <source>All sources</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">73,74</context>
+          <context context-type="linenumber">69,70</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.ts</context>
@@ -1944,7 +1940,7 @@
        <source>Clear search</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">92</context>
+          <context context-type="linenumber">88</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.html</context>
@@ -1955,14 +1951,14 @@
        <source>Search tasks</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">96,97</context>
+          <context context-type="linenumber">92,93</context>
        </context-group>
      </trans-unit>
      <trans-unit id="6849725902312323996" datatype="html">
        <source>Reset filters</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">105,106</context>
+          <context context-type="linenumber">101,102</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
@@ -1977,14 +1973,14 @@
        <source>{VAR_PLURAL, plural, =1 {1 task} other {<x id="INTERPOLATION"/> tasks}}</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">126</context>
+          <context context-type="linenumber">122</context>
        </context-group>
      </trans-unit>
      <trans-unit id="8953033926734869941" datatype="html">
        <source>Name</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">148,149</context>
+          <context context-type="linenumber">144,145</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.ts</context>
@@ -2095,7 +2091,7 @@
        <source>Created</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">149,150</context>
+          <context context-type="linenumber">145,146</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
@@ -2126,21 +2122,21 @@
        <source>Results</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">151,152</context>
+          <context context-type="linenumber">147,148</context>
        </context-group>
      </trans-unit>
      <trans-unit id="314315645942131479" datatype="html">
        <source>Info</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">153,154</context>
+          <context context-type="linenumber">149,150</context>
        </context-group>
      </trans-unit>
      <trans-unit id="3193976279273491157" datatype="html">
        <source>Actions</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">154,155</context>
+          <context context-type="linenumber">150,151</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/trash/trash.component.html</context>
@@ -2255,21 +2251,21 @@
        <source>click for full output</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">205</context>
+          <context context-type="linenumber">201</context>
        </context-group>
      </trans-unit>
      <trans-unit id="8946500279334661567" datatype="html">
        <source>View task details</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">211</context>
+          <context context-type="linenumber">207</context>
        </context-group>
      </trans-unit>
      <trans-unit id="1536087519743707362" datatype="html">
        <source>Dismiss</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">218</context>
+          <context context-type="linenumber">214</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.ts</context>
@@ -2292,28 +2288,28 @@
        <source>Open Document</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">223</context>
+          <context context-type="linenumber">219</context>
        </context-group>
      </trans-unit>
      <trans-unit id="5404759957685833020" datatype="html">
        <source>Result message</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">236,237</context>
+          <context context-type="linenumber">232,233</context>
        </context-group>
      </trans-unit>
      <trans-unit id="6621329748219109148" datatype="html">
        <source>Duplicate</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">243,244</context>
+          <context context-type="linenumber">239,240</context>
        </context-group>
      </trans-unit>
      <trans-unit id="7593555694782789615" datatype="html">
        <source>Open</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">251</context>
+          <context context-type="linenumber">247</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/app-frame/global-search/global-search.component.html</context>
@@ -2344,21 +2340,21 @@
        <source>Input data</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">261,262</context>
+          <context context-type="linenumber">257,258</context>
        </context-group>
      </trans-unit>
      <trans-unit id="1585185618099050920" datatype="html">
        <source>Result data</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">267,268</context>
+          <context context-type="linenumber">263,264</context>
        </context-group>
      </trans-unit>
      <trans-unit id="7976920528153858271" datatype="html">
        <source>No tasks match the current filters.</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/admin/tasks/tasks.component.html</context>
-          <context context-type="linenumber">289,291</context>
+          <context context-type="linenumber">285,287</context>
        </context-group>
      </trans-unit>
      <trans-unit id="2525230676386818985" datatype="html">
@@ -15,16 +15,16 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/cdk": "^22.1.1",
-    "@angular/common": "~22.1.1",
-    "@angular/compiler": "~22.1.1",
-    "@angular/core": "~22.1.1",
-    "@angular/forms": "~22.1.1",
-    "@angular/localize": "~22.1.1",
-    "@angular/platform-browser": "~22.1.1",
-    "@angular/router": "~22.1.1",
+    "@angular/cdk": "^22.1.4",
+    "@angular/common": "~22.1.3",
+    "@angular/compiler": "~22.1.3",
+    "@angular/core": "~22.1.3",
+    "@angular/forms": "~22.1.3",
+    "@angular/localize": "~22.1.3",
+    "@angular/platform-browser": "~22.1.3",
+    "@angular/router": "~22.1.3",
    "@ng-bootstrap/ng-bootstrap": "^21.0.0",
-    "@ng-select/ng-select": "~23.6.0",
+    "@ng-select/ng-select": "~24.0.2",
    "@ngneat/dirty-check-forms": "^3.0.3",
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.3.8",
@@ -45,16 +45,16 @@
  },
  "devDependencies": {
    "@angular-builders/jest": "^22.0.1",
-    "@angular-devkit/core": "^22.1.3",
-    "@angular-devkit/schematics": "^22.1.3",
+    "@angular-devkit/core": "^22.1.6",
+    "@angular-devkit/schematics": "^22.1.6",
    "@angular-eslint/builder": "22.1.0",
    "@angular-eslint/eslint-plugin": "22.1.0",
    "@angular-eslint/eslint-plugin-template": "22.1.0",
    "@angular-eslint/schematics": "22.1.0",
    "@angular-eslint/template-parser": "22.1.0",
-    "@angular/build": "22.1.3",
-    "@angular/cli": "22.1.3",
-    "@angular/compiler-cli": "~22.1.1",
+    "@angular/build": "22.1.6",
+    "@angular/cli": "22.1.6",
+    "@angular/compiler-cli": "~22.1.3",
    "@playwright/test": "^1.62.1",
    "@types/jest": "^30.0.0",
    "@types/node": "^26.2.0",
@@ -3,6 +3,7 @@
  i18n-title
  info="Tasks shows detailed information about document consumption and system tasks."
  i18n-info
+  [loading]="loading() && pagedTasks().length === 0"
  >
  <div class="btn-toolbar col col-md-auto align-items-center gap-2">
    <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size === 0">
@@ -21,11 +22,6 @@
  </div>
 </pngx-page-header>

-@if (loading() && pagedTasks().length === 0) {
-  <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
-  <div class="visually-hidden" i18n>Loading...</div>
-}
-
 <div class="task-controls mb-3 gap-3 btn-toolbar align-items-center" role="toolbar">
  <div class="task-view-scope btn-group btn-group-sm" role="group">
    <input
@@ -285,6 +281,6 @@
      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks: tasksForSection(section), section: section}"></ng-container>
    </div>
  }
-} @else {
+} @else if (!loading() || pagedTasks().length > 0) {
  <div class="alert alert-secondary fst-italic" i18n>No tasks match the current filters.</div>
 }
@@ -34,9 +34,7 @@
  }

  @media (min-width: 768px) {
-    &.expanded {
-      --pngx-sidebar-width: var(--pngx-sidebar-expanded-width);
-    }
+    --pngx-sidebar-width: var(--pngx-sidebar-expanded-width);
  }
 }
@media (max-width: 767.98px) {
@@ -113,6 +111,13 @@ main {
    }
  }

+  // only animate when the user toggles slim mode
+  .sidebar:not(.animating),
+  .sidebar:not(.animating) ~ main,
+  .sidebar:not(.animating) .sidebar-slim-toggler {
+    transition: none;
+  }
+
  .sidebar.slim {
    max-width: 55px;

@@ -123,8 +128,6 @@ main {
  }

  .sidebar.slim:not(.animating) {
-    transition: none;
-
    li.nav-item span,
    .sidebar-heading span {
      display: none;
@@ -144,10 +147,6 @@ main {
    }
  }

-  .sidebar.slim:not(.animating) ~ main.col-slim {
-    transition: none;
-  }
-
  .sidebar.animating {
    li.nav-item span,
    .sidebar-heading span {
@@ -196,6 +195,26 @@ main {
  --bs-popover-body-padding-y: .5rem;
 }

+@media (prefers-reduced-motion: no-preference) {
+  .sidebar-sticky > ul,
+  .sidebar-sticky > .nav-group {
+    animation: sidebar-nav-in .3s cubic-bezier(.22, .61, .36, 1) backwards;
+  }
+
+  @for $i from 2 through 5 {
+    .sidebar-sticky > :nth-child(#{$i}) {
+      animation-delay: #{($i - 1) * 0.04}s;
+    }
+  }
+}
+
+@keyframes sidebar-nav-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+
 .sidebar-sticky {
  position: relative;
  top: 0;
@@ -6,7 +6,7 @@
        <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge>
      }
    </button>
-    <div class="px-3 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
+    <div [id]="dropdownMenuId" class="px-3 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
      <ng-container *ngTemplateOutlet="list; context: { queries: selectionModel.queries }"></ng-container>
    </div>
  </div>
@@ -64,10 +64,11 @@
      [disabled]="disabled"
      [virtualScroll]="getSelectOptionsForField(atom.field)?.length > 100"
      [searchFn]="selectOptionSearchFn"
+      [appendTo]="selectAppendTo"
      (mousedown)="$event.stopImmediatePropagation()"
    ></ng-select>
  } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.DocumentLink) {
-    <pngx-input-document-link [(ngModel)]="atom.value" class="w-25 form-select doc-link-select p-0" placeholder="Search docs..." i18n-placeholder [minimal]="true"></pngx-input-document-link>
+    <pngx-input-document-link [(ngModel)]="atom.value" class="w-25 form-select doc-link-select p-0" placeholder="Search docs..." i18n-placeholder [minimal]="true" [appendTo]="selectAppendTo"></pngx-input-document-link>
  } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Monetary) {
    <input class="w-25 form-control rounded-end" type="text" inputmode="decimal"
      [ngModel]="atom.value"
@@ -88,6 +89,7 @@
      bindLabel="name"
      bindValue="id"
      [searchFn]="customFieldSearchFn"
+      [appendTo]="selectAppendTo"
      (mousedown)="$event.stopImmediatePropagation()"
    ></ng-select>
    <select class="w-25 form-select" [(ngModel)]="atom.operator" [disabled]="disabled">
@@ -121,7 +123,7 @@
        <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
      }
      @case (CustomFieldQueryOperator.Contains) {
-        <pngx-input-document-link [(ngModel)]="atom.value" class="w-25 form-select doc-link-select p-0" placeholder="Search docs..." i18n-placeholder [minimal]="true"></pngx-input-document-link>
+        <pngx-input-document-link [(ngModel)]="atom.value" class="w-25 form-select doc-link-select p-0" placeholder="Search docs..." i18n-placeholder [minimal]="true" [appendTo]="selectAppendTo"></pngx-input-document-link>
      }
      @case (CustomFieldQueryOperator.In) {
        <ng-select
@@ -133,6 +135,7 @@
          [disabled]="disabled"
          [multiple]="true"
          [searchFn]="selectOptionSearchFn"
+          [appendTo]="selectAppendTo"
          (mousedown)="$event.stopImmediatePropagation()"
        ></ng-select>
      }
@@ -1,3 +1,4 @@
+import { _IdGenerator } from '@angular/cdk/a11y'
 import {
  getLocaleNumberSymbol,
  NgClass,
@@ -250,6 +251,18 @@ export class CustomFieldsQueryDropdownComponent extends LoadingComponentWithPerm
  @Input()
  useDropdown: boolean = true

+  private readonly idGenerator = inject(_IdGenerator)
+  public readonly dropdownMenuId = this.idGenerator.getId(
+    'pngx-custom-fields-query-dropdown-'
+  )
+
+  /**
+   * Keep ng-select dropdown panels inside the dropdown menu
+   */
+  get selectAppendTo(): string {
+    return this.useDropdown ? `#${this.dropdownMenuId}` : null
+  }
+
  get name(): string {
    return this.title ? this.title.replace(/\s/g, '_').toLowerCase() : null
  }
@@ -3,7 +3,7 @@
    <i-bs width="1em" height="1em" name="calendar-event-fill"></i-bs><div class="d-none d-sm-inline ms-1">{{title}}</div>
    <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
  </button>
-  <div class="dropdown-menu date-dropdown shadow p-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
+  <div [id]="dropdownMenuId" class="dropdown-menu date-dropdown shadow p-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
    <h6 class="dropdown-header border-bottom" i18n>Created</h6>
    <div class="list-group list-group-flush">
      <div class="list-group-item d-flex p-2 select-item" role="menuitem">
@@ -21,6 +21,7 @@
          bindValue="id"
          bindLabel="name"
          clearable="false"
+          [appendTo]="'#' + dropdownMenuId"
          placeholder="Relative dates"
          i18n-placeholder
          (change)="onSetCreatedRelativeDate($event)">
@@ -97,6 +98,7 @@
            bindValue="id"
            bindLabel="name"
            clearable="false"
+            [appendTo]="'#' + dropdownMenuId"
            placeholder="Relative dates"
            i18n-placeholder
            (change)="onSetAddedRelativeDate($event)">
@@ -23,6 +23,7 @@ import { SettingsService } from 'src/app/services/settings.service'
 import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter'
 import { pngxPopperOptions } from 'src/app/utils/popper-options'
 import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
+import { _IdGenerator } from '@angular/cdk/a11y'

 export interface DateSelection {
  createdTo?: string
@@ -68,6 +69,10 @@ export enum RelativeDate {
 })
 export class DatesDropdownComponent implements OnInit, OnDestroy {
  public popperOptions = pngxPopperOptions
+  private readonly idGenerator = inject(_IdGenerator)
+  public readonly dropdownMenuId = this.idGenerator.getId(
+    'pngx-dates-dropdown-'
+  )

  constructor() {
    const settings = inject(SettingsService)
@@ -33,6 +33,7 @@
    [compareWith]="compareDocuments"
    [trackByFn]="trackByFn"
    [minTermLength]="2"
+    [appendTo]="appendTo"
    [loading]="loading()"
    [typeahead]="documentsInput$"
    (mousedown)="$event.stopImmediatePropagation()"
@@ -81,6 +81,12 @@ export class DocumentLinkComponent
  @Input()
  placeholder: string = $localize`Search for documents`

+  /**
+   * Parent for ng-select dropdown, needed to prevent close on click.
+   */
+  @Input()
+  appendTo: string = null
+
  get selectedDocumentIDs(): number[] {
    return this.selectedDocuments.map((d) => d.id)
  }
@@ -22,7 +22,7 @@
 }

 // Dropdown hierarchy reveal for ng-select options
-:host ::ng-deep .ng-dropdown-panel .ng-option {
+::ng-deep .ng-dropdown-panel .ng-option {
  overflow-x: auto !important;

  .tag-option-row {
@@ -41,12 +41,12 @@
  }
 }

-:host ::ng-deep .ng-dropdown-panel .ng-option:hover .hierarchy-reveal,
-:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-reveal {
+::ng-deep .ng-dropdown-panel .ng-option:hover .hierarchy-reveal,
+::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-reveal {
  max-width: 1000px;
 }

 ::ng-deep .ng-dropdown-panel .ng-option:hover .hierarchy-indicator,
-:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-indicator {
+::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-indicator {
  background: transparent;
 }
@@ -3,7 +3,7 @@
    <i-bs name="person-fill-lock"></i-bs><div class="d-none d-sm-inline ms-1">{{title}}</div>
    <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
  </button>
-  <div class="dropdown-menu permission-filter-dropdown shadow py-0 w-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
+  <div [id]="dropdownMenuId" class="dropdown-menu permission-filter-dropdown shadow py-0 w-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
    <div class="list-group list-group-flush">
      <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.NONE)" [disabled]="disabled">
        <div class="selected-icon me-1">
@@ -58,7 +58,10 @@
      <button *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }" class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" [disabled]="disabled">
        <div class="selected-icon me-1">
          @if (selectionModel.ownerFilter() === OwnerFilterType.OTHERS) {
-            <i-bs width="1em" height="1em" name="check"></i-bs>
+            <a class="text-reset focus-variants" href="javascript:void(0)" (click)="clearIncludeUsers()" aria-label="Clear selected users" i18n-aria-label>
+              <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
+              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+            </a>
          }
        </div>
        <div class="me-1 w-100">
@@ -69,6 +72,7 @@
            (ngModelChange)="selectionModel.includeUsers.set($event)"
            [disabled]="disabled"
            [clearable]="false"
+            [appendTo]="'#' + dropdownMenuId"
            [items]="users()"
            bindLabel="username"
            multiple="true"
@@ -6,3 +6,18 @@
    min-width: 1em;
    min-height: 1em;
 }
+
+.focus-variants {
+  .variant-focused {
+    display: none;
+  }
+
+  &:hover, &:focus {
+    .variant-unfocused {
+      display: none;
+    }
+    .variant-focused {
+      display: block;
+    }
+  }
+}
@@ -171,6 +171,21 @@ describe('PermissionsFilterDropdownComponent', () => {

    expect(component.selectionModel.ownerFilter()).toEqual(OwnerFilterType.NONE)
  })
+  it('should clear selected users', () => {
+    component.selectionModel.includeUsers.set([12])
+    component.onUserSelect()
+    component.selectionModel.hideUnowned.set(true)
+    expect(component.selectionModel.ownerFilter()).toEqual(
+      OwnerFilterType.OTHERS
+    )
+
+    component.clearIncludeUsers()
+
+    expect(component.selectionModel.includeUsers()).toEqual([])
+    expect(component.selectionModel.ownerFilter()).toEqual(OwnerFilterType.NONE)
+    expect(component.selectionModel.hideUnowned()).toBeTruthy()
+  })
+
  it('should emit a selection model depending on the type of owner filter set', () => {
    const emitted = () => ({
      excludeUsers: ownerFilterSetResult.excludeUsers(),
@@ -1,3 +1,4 @@
+import { _IdGenerator } from '@angular/cdk/a11y'
 import { NgClass } from '@angular/common'
 import {
  Component,
@@ -70,6 +71,11 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions

  public OwnerFilterType = OwnerFilterType

+  private readonly idGenerator = inject(_IdGenerator)
+  public readonly dropdownMenuId = this.idGenerator.getId(
+    'pngx-permissions-filter-dropdown-'
+  )
+
  @Input()
  title: string

@@ -205,6 +211,11 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
    this.ownerFilterSet.emit(this.selectionModel)
  }

+  clearIncludeUsers() {
+    this.selectionModel.includeUsers.set([])
+    this.onUserSelect()
+  }
+
  onUserSelect() {
    this.selectionModel.ownerFilter.set(
      this.selectionModel.includeUsers()?.length
@@ -374,17 +374,6 @@ th[pngxSortable] {
      }
    }

-    .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
-      background-color: var(--pngx-bg-darker) !important;
-      color: var(--pngx-body-color-accent) !important;
-    }
-
-    .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
-    .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked {
-      font-weight: bold;
-      background-color: var(--pngx-bg-alt2) !important;
-    }
-
    &.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder,
    .ng-select-container .ng-value-container .ng-placeholder {
      top: 7px;
@@ -402,6 +391,22 @@ th[pngxSortable] {
  }
 }

+// ng-select renders the dropdown panel in a CDK overlay outside the component
+.ng-dropdown-panel {
+  font-size: var(--pngx-body-font-size);
+
+  .ng-dropdown-panel-items .ng-option.ng-option-marked {
+    background-color: var(--pngx-bg-darker) !important;
+    color: var(--pngx-body-color-accent) !important;
+  }
+
+  .ng-dropdown-panel-items .ng-option.ng-option-selected,
+  .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked {
+    font-weight: bold;
+    background-color: var(--pngx-bg-alt2) !important;
+  }
+}
+
 .paperless-input-tags {
  .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
    background-color: transparent;
@@ -237,8 +237,8 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,%3csvg xmlns='h
    mix-blend-mode: luminosity;
  }

-  .paperless-input-select .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:not(.ng-option-selected):hover,
-  .paperless-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
+  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:not(.ng-option-selected):hover,
+  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
    background-color: var(--bs-light) !important;
  }

@@ -708,9 +708,9 @@
      }
    },
    "node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.4.tgz",
+      "integrity": "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -4,11 +4,11 @@ requires-python = ">=3.11"
 resolution-markers = [
    "python_full_version >= '3.15' and sys_platform == 'darwin'",
    "python_full_version >= '3.15' and sys_platform == 'linux'",
+    "python_full_version == '3.14.*' and platform_machine == 'x86_64' and sys_platform == 'linux'",
+    "python_full_version == '3.14.*' and platform_machine == 'aarch64' and sys_platform == 'linux'",
    "python_full_version >= '3.12' and python_full_version < '3.15' and sys_platform == 'darwin'",
    "python_full_version == '3.12.*' and platform_machine == 'x86_64' and sys_platform == 'linux'",
    "python_full_version == '3.12.*' and platform_machine == 'aarch64' and sys_platform == 'linux'",
-    "python_full_version == '3.14.*' and platform_machine == 'x86_64' and sys_platform == 'linux'",
-    "python_full_version == '3.14.*' and platform_machine == 'aarch64' and sys_platform == 'linux'",
    "(python_full_version >= '3.12' and python_full_version < '3.15' and platform_machine != 'aarch64' and platform_machine != 'x86_64' and sys_platform == 'linux') or (python_full_version == '3.13.*' and platform_machine == 'aarch64' and sys_platform == 'linux') or (python_full_version == '3.13.*' and platform_machine == 'x86_64' and sys_platform == 'linux')",
    "python_full_version < '3.12' and sys_platform == 'darwin'",
    "python_full_version < '3.12' and sys_platform == 'linux'",
@@ -1116,14 +1116,14 @@ wheels = [

 [[package]]
 name = "djangorestframework"
-version = "3.17.1"
+version = "3.17.2"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
    { name = "django" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/ca/d7/c016e69fac19ff8afdc89db9d31d9ae43ae031e4d1993b20aca179b8301a/djangorestframework-3.17.1.tar.gz", hash = "sha256:a6def5f447fe78ff853bff1d47a3c59bf38f5434b031780b351b0c73a62db1a5", size = 905742, upload-time = "2026-03-24T16:58:33.705Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/3b/35/c96055e700fdff25da3a7b7756cfd1d4dc54f38b9bc6d6c5e19e3a0fdc20/djangorestframework-3.17.2.tar.gz", hash = "sha256:89ed713b6dc83e1539f214b7d10808ae19bb8511004beba886225da6d5c9dafa", size = 906683, upload-time = "2026-08-05T07:47:22.5Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/5a/e1/2c516bdc83652b1a60c6119366ac2c0607b479ed05cd6093f916ca8928f8/djangorestframework-3.17.1-py3-none-any.whl", hash = "sha256:c3c74dd3e83a5a3efc37b3c18d92bd6f86a6791c7b7d4dff62bb068500e76457", size = 898844, upload-time = "2026-03-24T16:58:31.845Z" },
+    { url = "https://files.pythonhosted.org/packages/a2/46/c14108e400b208c394325eb63fbae06c81341b6447fa1a6f9da718b17fe7/djangorestframework-3.17.2-py3-none-any.whl", hash = "sha256:cb0546a7415d5b46c04e0f4fe0a54b2109f4fdd5e83ca773c8c6183a6493d042", size = 899109, upload-time = "2026-08-05T07:47:20.853Z" },
 ]

 [[package]]
@@ -2718,7 +2718,7 @@ wheels = [

 [[package]]
 name = "nltk"
-version = "3.10.0"
+version = "3.10.3"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
    { name = "click" },
@@ -2727,9 +2727,9 @@ dependencies = [
    { name = "regex" },
    { name = "tqdm" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/96/02/df4f105b28a7c16b0e41423bc09cf0f1b8a305df4ef0b10ca74a2e4c648c/nltk-3.10.0.tar.gz", hash = "sha256:4fbac1d98203cbcd1b5d94a2877fb822300072d80604a5e7fae49d2c5f84e8c1", size = 3089244, upload-time = "2026-07-08T02:39:13.562Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/e0/e6/fe51d2bb1a3b446f59c5c8165999a9fee208bc346af90a7cbf7657bc0d75/nltk-3.10.3.tar.gz", hash = "sha256:bb9327a461c3811c2fa4900e03840401f2126adfb30c0072827c433bd2444ea4", size = 5137152, upload-time = "2026-08-12T23:46:37.258Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/6e/89/a0b0f35e2820d6a99d75ea1c11977ee6d5c9e6658eceb45b0c7620881faa/nltk-3.10.0-py3-none-any.whl", hash = "sha256:54ff84d4916d3ef127e8953bee0023f6a6b320b75d634a19e06ef056d3d244bf", size = 1716144, upload-time = "2026-07-08T02:39:09.753Z" },
+    { url = "https://files.pythonhosted.org/packages/b6/6d/ebd2af4640b12168fdf0cb74b6118df2f32a2f62ec7e0c06fbfd80706639/nltk-3.10.3-py3-none-any.whl", hash = "sha256:ff9598a8e20518ee0d557745890cc4435b9578489e2dcbc69c4f81fa060caf7c", size = 1798643, upload-time = "2026-08-12T23:44:13.478Z" },
 ]

 [[package]]
@@ -5014,10 +5014,10 @@ version = "2.13.0+cpu"
 source = { registry = "https://download.pytorch.org/whl/cpu" }
 resolution-markers = [
    "python_full_version >= '3.15' and sys_platform == 'linux'",
-    "python_full_version == '3.12.*' and platform_machine == 'x86_64' and sys_platform == 'linux'",
-    "python_full_version == '3.12.*' and platform_machine == 'aarch64' and sys_platform == 'linux'",
    "python_full_version == '3.14.*' and platform_machine == 'x86_64' and sys_platform == 'linux'",
    "python_full_version == '3.14.*' and platform_machine == 'aarch64' and sys_platform == 'linux'",
+    "python_full_version == '3.12.*' and platform_machine == 'x86_64' and sys_platform == 'linux'",
+    "python_full_version == '3.12.*' and platform_machine == 'aarch64' and sys_platform == 'linux'",
    "(python_full_version >= '3.12' and python_full_version < '3.15' and platform_machine != 'aarch64' and platform_machine != 'x86_64' and sys_platform == 'linux') or (python_full_version == '3.13.*' and platform_machine == 'aarch64' and sys_platform == 'linux') or (python_full_version == '3.13.*' and platform_machine == 'x86_64' and sys_platform == 'linux')",
    "python_full_version < '3.12' and sys_platform == 'linux'",
 ]
Author	SHA1	Message	Date
shamoon	da82f26c14	Add the clear to permissions dropdown	2026-09-02 20:27:32 -07:00
shamoon	405cad4617	Add a couple e2e tests just in case	2026-09-02 20:27:32 -07:00
shamoon	3b4db07488	CSS fixes	2026-09-02 20:27:32 -07:00
shamoon	d0195f888f	And the CF dropdown	2026-09-02 20:27:31 -07:00
shamoon	3003b9e05e	Same type of fix for permissions filter dropdown	2026-09-02 20:27:31 -07:00
shamoon	2fa48494c2	Fix the date dropdown	2026-09-02 20:27:31 -07:00
shamoon	b0540b5fdc	Bump ng-select	2026-09-02 20:27:30 -07:00
dependabot[bot]	a3851c157a	Chore(deps-dev): Bump postcss-selector-parser from 6.1.2 to 6.1.4 in /src/paperless_mail/templates in the npm_and_yarn group across 1 directory (#13905 ) Signed-off-by: dependabot[bot] <support@github.com>	2026-09-03 02:49:45 +00:00
dependabot[bot]	853b57c71d	Chore(deps): Bump nltk in the data-nlp-search group across 1 directory (#13917 ) Bumps the data-nlp-search group with 1 update in the / directory: [nltk](https://github.com/nltk/nltk). Updates `nltk` from 3.10.0 to 3.10.3 - [Release notes](https://github.com/nltk/nltk/releases) - [Changelog](https://github.com/nltk/nltk/blob/develop/ChangeLog) - [Commits](https://github.com/nltk/nltk/compare/v3.10.0...v3.10.3) --- updated-dependencies: - dependency-name: nltk dependency-version: 3.10.3 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: data-nlp-search ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-09-03 02:17:57 +00:00
GitHub Actions	1e5afe0968	Auto translate strings	2026-09-02 23:59:57 +00:00
shamoon	78ea120e0e	Fix: use the header loading indicator on tasks page (#13949 )	2026-09-02 16:58:14 -07:00
GitHub Actions	6b2a5e1a2e	Auto translate strings	2026-09-02 23:51:42 +00:00
dependabot[bot]andshamoon	bb88453a5f	Chore(deps): Bump the frontend-angular-dependencies group across 1 directory with 14 updates (#13915 ) Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com> Signed-off-by: dependabot[bot] <support@github.com>	2026-09-02 23:50:05 +00:00
dependabot[bot]	135f9f6251	Chore(deps): Bump djangorestframework in the uv group across 1 directory (#13904 ) Bumps the uv group with 1 update in the / directory: [djangorestframework](https://github.com/encode/django-rest-framework). Updates `djangorestframework` from 3.17.1 to 3.17.2 - [Release notes](https://github.com/encode/django-rest-framework/releases) - [Commits](https://github.com/encode/django-rest-framework/compare/3.17.1...3.17.2) --- updated-dependencies: - dependency-name: djangorestframework dependency-version: 3.17.2 dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-09-02 22:48:44 +00:00
shamoon	1c0fbeb6f3	Fix: fix load sidebar size animating (#13947 )	2026-09-02 15:25:24 -07:00