Skip to content

chore: Upgrade MUI to v9#9321

Draft
darrenvong wants to merge 4 commits into
developfrom
web/chore/upgrade-mui-to-v9
Draft

chore: Upgrade MUI to v9#9321
darrenvong wants to merge 4 commits into
developfrom
web/chore/upgrade-mui-to-v9

Conversation

@darrenvong

@darrenvong darrenvong commented Jul 24, 2026

Copy link
Copy Markdown
Member

Describe briefly what this PR is doing and why.

Closes #9132

Relevant changes made from following the migration guide:

  • Package bumps: @mui/material/icons-material/system/utils → 9.2.0, material-nextjs → 9.1.1, @mui/lab → 9.0.0-beta.6, x-date-pickers → 9.10.0.
  • Icon renames (Outline → Outlined): ChatBubbleOutline, MailOutline, CheckCircleOutline, ExpandMore/LessOutline, etc.
  • InputProps/inputPropsslotProps: TextField InputProps=slotProps={{ input }}; Autocomplete params.InputPropsparams.slotProps.input, params.inputPropsparams.slotProps.htmlInput.
  • Pickers slotProps: slotProps.textField.InputPropsslotProps.textField.slotProps.input; PickersDay removal/rename (PickerDay2PickersDay).
  • ListItemText primaryTypographyPropsslotProps.primary.
  • System-props removal: CSS-shorthand props (display, gap, alignItems, fontWeight, color, maxWidth, …) dropped from Box/Grid/Stack/Typography/Link → moved to sx.

Testing

Explain how you tested this PR and give clear steps so the reviewer can replicate.

Here's the manual smoke test list I've been going through based on the pages with changed code as a result of this upgrade:

/search (highest value)

  • Type a keyword in the search field and press Enter (FloatingSearchControls slotProps.input migration)
  • Pick a location from the autocomplete — clear "X" and search icons must render in the right order (LocationAutocompleteOutlined adornments)
  • Open the filter dialog and drag the sliders (Slider switched from mouse to pointer events)

/signup (account form step)

  • Pick a birthdate from the calendar — field is picker-only, no typing (Datepicker pickerInputOnly + PickersDay removal in pickers v9)
  • Search for and set a location on the map (MapSearch → Autocomplete wrapper, freeSolo)

/profile/edit

  • Open a tag input popper (regions visited/lived, languages) — input inside the popper should autofocus and typing should filter options (ProfileTagInput, manual params.slotProps fix)
  • Tick/untick options and confirm chips update
  • Set location via the map (EditLocationMap)
  • Switch between About/Home tabs

/dashboard

  • Community browser list — item text styling unchanged (primaryTypographyPropsslotProps.primary)
  • Discussion rows show the chat bubble icon (renamed ChatBubbleOutlined)
  • Hero destination search autocomplete works

/communities

  • Community search field — adornments and results (CommunitySearch params.InputProps migration)
  • Community browser drill-down

/account-settings/notifications

  • Mail icon renders (renamed MailOutlined)
  • Icon/text spacing in the settings list looks right (ListItemIcon min-width dropped 56px → 36px) [This definitely reduced the gap between icon and label, but still looks reasonable to me so ok to keep probably?]

/what-is-couch-surfing

  • Compare table check icons render (renamed CheckCircleOutlined)
  • List icon spacing looks right (second ListItemIcon page)

Events

  • /event/new (and editing an event): location autocomplete, start/end Datepicker + Timepicker — including typing into the masked date/time fields (pickers v9 slotProps migration)
  • /events discover tab: location autocomplete

Host requests / trips

  • User profile → "Request to stay": arrival/departure Datepickers
  • /public-trips: trip and offer-to-host dialogs' Datepicker

/messages

  • Create group chat / invite to chat: friend autocomplete renders selected friends as chips

Leave reference flow

  • Rating slider drags smoothly and the custom thumb label follows (pointer-event change)

Behavior-change checks (no code edits, v9 runtime changes)

  • Tab pages — /user/[username], profile edit, /connections, community pages, /mod: click between tabs, then arrow-key navigation (lab TabContext on v9 roving-tabindex Tabs)
  • Menus — navbar avatar menu, overflow menus: open + arrow-key navigation. v9 throws if a MenuItem renders outside Menu/MenuList, so crashes would surface immediately
  • Dialogs — report dialog, profile-incomplete dialog, filter dialog: Escape still closes them; general focus behavior after close (Backdrop no longer sets aria-hidden)

Backend checklist

  • Added tests for any new code or added a regression test if fixing a bug
  • Run the backend locally and it works
  • Added migrations if there are any database changes, rebased onto develop if necessary for linear migration history

Web frontend checklist

  • There are no console warnings when running the app
  • Added tests where relevant
  • Clicked around my changes running locally and it works
  • Checked Desktop, Mobile and Tablet screen sizes

For maintainers

  • Maintainers can push commits to my branch
  • Maintainers can merge this PR for me

@CouchersBot

CouchersBot commented Jul 24, 2026

Copy link
Copy Markdown
Member

Web (Vercel)

View the Vercel web preview for this branch.

Other

Protos Web coverage

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.

Upgrade MUI to v9

2 participants