Skip to content

Combobox scrolling (within modals) and search input focus issues in iOS 26.4 26.5 #8928

Description

@samcarton

Dependencies check up

  • I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

9.2.1

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Other, I will specify in the bug description

Describe the bug

2 main issues that seem to have appeared on iOS 26.4 and 26.5 (in both safari and chrome):

  1. Some scrollable combobox popovers are unable to be scrolled, when the input is in a modal.
  2. combobox.focusSearchInput() either does nothing (no focus) or shows then immediately hides the keyboard.

The linked repro has a number of scenarios.

  • The first 2 selects are loosely based on components in our app.
  • The final select is copied from the SelectDropdownSearch combobox example, except with more items in the list and a scrollable panel.

On the root page (i.e. outside the modals):

  • ✔️ all select popovers are scrollable
  • ❌ the first 2 selects: the search inputs in the popover do not receive focus when opened on iOS. But you can touch them to focus and search fine.
  • ❌ the last select: the search input does not receive focus when opened on iOS, and when you try to touch and focus it the keyboard appears and then disappears immediately

Inside the modals:

  • ❌ the first 2 select popovers can't be scrolled. This does seem to work sometimes so try reloading and doing it again. The scroll is stuck, but it can be unstuck by long-pressing and text-highlighting an item in the select. Then it magically becomes scrollable.
  • ✔️ the last select is scrollable.
  • ❌ the search inputs have the same issues as they do outside the modals (see above)

Weird notes:

  • for the second select (SelectWithPopoverSearch) the "scroll locked" issue seems to happen more often when the toggleDropdown is called from a nested element inside the combobox target element.
  • The behavior seems to be the same in both react-modal and the mantine modal
  • commenting out combobox.focusSearchInput() seems to fix the "scroll locked" issue.
  • withinPortal={false} also seems to fix the "scroll locked" issue.

This issue is possibly related, seems like the same "stuck scrolling" symptom #8847

Apologies that this isn't more concise, just hoping that this helps someone in the same boat or helps us get closer to an actual root cause. I appreciate it's hard to stay on top of changes, especially when Apple decides to drop grenades on us in the form of iOS safari updates.

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/devbox/mantine-react-template-forked-2sssyc

Possible fix

Workarounds

  • use withinPortal={false}
  • don't use combobox.focusSearchInput()
  • wait for apple to "fix" it in safari

Self-service

  • I would be willing to implement a fix for this issue

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions