Skip to content

Fix Mantine v9 API breakage in Collapse, Grid and modal types#3358

Closed
mi3lix9 wants to merge 1 commit into
morpheus65535:developmentfrom
mi3lix9:fix-mantine-v9-collapse-and-modal-imports
Closed

Fix Mantine v9 API breakage in Collapse, Grid and modal types#3358
mi3lix9 wants to merge 1 commit into
morpheus65535:developmentfrom
mi3lix9:fix-mantine-v9-collapse-and-modal-imports

Conversation

@mi3lix9
Copy link
Copy Markdown

@mi3lix9 mi3lix9 commented May 28, 2026

Summary

Follow-up fixes for #3333 (Bump mantine to v9). Several pages — Settings, System, Wanted, History, Blacklist — render as blank because navbar dropdowns can't expand. The browser console shows:

Received `false` for a non-boolean attribute `expanded`
Matched leaf route at location "/system/" does not have an element or Component.

The TypeScript output lists 8 errors from the same v9 API changes. Runtime tolerates the unknown props as no-ops, but Collapse then defaults to closed and child route links are never rendered.

Changes

Three Mantine v9 API breaks:

  1. Collapse prop renamed — v9 uses in (boolean) instead of hidden/expanded. Fixed in 4 call sites:

    • App/Navbar.tsx — the user-facing blocker: dropdowns wouldn't open. Replaced with a conditional render so the empty-children case is handled in JSX rather than a removed hidden prop.
    • App/NotificationDrawer.tsx
    • components/modals/ManualSearchModal.tsx (×2)
    • pages/Settings/components/collapse.tsx
  2. ModalSettings no longer re-exported from @mantine/modals root in v9. Switched to a locally-derived Parameters<typeof openModal>[0] alias in modules/modals/hooks.ts and modules/modals/WithModal.tsx — avoids depending on the internal lib/context path.

  3. Grid prop renamedgapgutter. Fixed in pages/views/ItemOverview.tsx.

Test plan

  • yarn tsc / Vite reports Found 0 errors after the fixes (was Found 8 errors)
  • Navbar dropdowns (Settings, System, Wanted, History, Blacklist) expand on click and reveal child links
  • Navigating to /settings/general, /system/tasks, etc. via the now-visible links renders the actual page content
  • ItemOverview (series/movie detail header) renders without prop warnings
  • Notification drawer collapsible sections still toggle
  • Manual search modal release-info cells still expand/collapse

After the Mantine v9 bump (morpheus65535#3333), several pages were rendering blank
because of API breaks that TypeScript flagged but the runtime
tolerated as no-ops (so the Collapse never opened, dropdowns stayed
collapsed, etc.). Three categories:

1. `Collapse` v9 takes `in` (boolean), not `hidden`/`expanded`. Updated
   four call sites:
   - `App/Navbar.tsx` — the navbar dropdowns (Settings, System,
     Wanted, History, Blacklist) couldn't expand on click, leaving
     child links unreachable. Replaced with a conditional render so
     the empty-children case is handled in JSX rather than a removed
     prop.
   - `App/NotificationDrawer.tsx`
   - `components/modals/ManualSearchModal.tsx` (×2)
   - `pages/Settings/components/collapse.tsx`

2. `ModalSettings` is no longer exported from `@mantine/modals` in v9.
   Switched to a locally-derived `Parameters<typeof openModal>[0]`
   alias in both `modules/modals/hooks.ts` and
   `modules/modals/WithModal.tsx` so we don't depend on the internal
   type path.

3. `Grid` v9 uses `gutter` instead of `gap`. Renamed the one prop in
   `pages/views/ItemOverview.tsx`.

Symptoms before the fix: `Settings`, `System`, `Wanted`, `History`,
`Blacklist` rendered as blank pages because the Collapse stayed shut
and the parent route has no element (the React Router warning
"Matched leaf route at ... does not have an element or Component"
appeared in the browser console).
@anderson-oki
Copy link
Copy Markdown
Collaborator

anderson-oki commented May 30, 2026

This PR actually doesnt makes sense, see https://mantine.dev/core/collapse/?t=props it doesnt have in and have expanded.

Screenshot 2026-05-31 at 0 03 58

Also i cant reproduce your issue.

@anderson-oki
Copy link
Copy Markdown
Collaborator

Your dev environment is probably broken because you didnt run npm install and its reverting to mantine v8, see https://v8.mantine.dev/core/collapse/?t=props

@anderson-oki
Copy link
Copy Markdown
Collaborator

anderson-oki commented May 30, 2026

Leaving as evidence and reference after reviewing the PR

  • Collapse component: In Mantine v9 (e.g., version 9.2.0 used in Bazarr), the Collapse component uses expanded (boolean) to control its open state. The prop in was used in v7/v8 and has been removed/renamed to expanded in v9.

  • Grid component: In Mantine v9, the Grid component uses gap to control column spacing. The prop gutter is from v7 and has been removed in v9.

  • ModalSettings import: @mantine/modals v9 still exports ModalSettings from @mantine/modals (verified in index.d.ts). Re-defining it manually is unnecessary.

Check https://mantine.dev/core/collapse/?t=props V9 vs https://v8.mantine.dev/core/collapse/?t=props V8

@mi3lix9 mi3lix9 deleted the fix-mantine-v9-collapse-and-modal-imports branch May 30, 2026 18:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants