search

filamentphp / filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
https://filamentphp.com
MIT License
17.13k stars 2.69k forks source link

Unable to scroll modals on iOS Safari #11225

Closed ashleyshenton closed 6 months ago

ashleyshenton commented 6 months ago

Package

filament/filament

Package Version

v3.2.21 - v3.2.23

Laravel Version

v10.43.0

Livewire Version

v3.4.4

PHP Version

PHP 8.3.2

Problem description

Modals on iOS Safari can not be scrolled. This is a regression of an issue that was fixed a few weeks ago in v3.2.14.

This was the commit that fixed the issue then. https://github.com/filamentphp/filament/commit/02d4fad9db8cdcc261c6ab5f2a09b3599a6504c3

I've taken a look at the recent release and discovered the issue was added in v3.2.21, specifically this commit. https://github.com/filamentphp/filament/commit/66f9f7d772e1197462aebadd166c8e38038e40ba

For the reproduction repository, I've provided the filament demo as it is reproducible there if you upgrade the filament version.

Expected behavior

For the modal to be scrollable on iOS.

Steps to reproduce

Upgrade the filament demo to a version of v3.2.21 - v3.2.23.

Navigate to Authors > Edit on an iOS device and try and scroll down the modal to see the lower fields / buttons.

Reproduction repository

https://github.com/filamentphp/demo

Relevant log output

No response

jimarick commented 6 months ago

Also being affected by this bug - and also an issue whereby the select dropdown options are cut off and not displayed correctly since upgrading to 3.2.23

kataklopgti commented 6 months ago

i ahve same issue...

zepfietje commented 6 months ago

Thanks for reporting, folks. Let's track all related modal issues that got reintroduced here.

binaryfire commented 6 months ago

Just re-posting my Discord comment here for reference

Has there been a recent change that modifies the scroll behavior of modals? Scrollbars are now appearing when my ->native(false) selects open. On Chrome / Edge / Firefox on Windows:

image

zepfietje commented 6 months ago

Scrolling on touch devices fixed here: https://github.com/filamentphp/filament/commit/b22bc0233d4f9d8bce63b08af87219236691be81.

ashleyshenton commented 6 months ago

Thanks @zepfietje, looking forward to the tagged release.

danharrin commented 6 months ago

v3.2.24

zepfietje commented 6 months ago

We've reverted recent changes to the modal as a quick fix before tagging v3.2.24. This means the modal slide-over animation issue is reintroduced in the latest release.

The fix for modal scrolling and overflow issues related to this GitHub issue, entailed a larger refactor of how modals are structured. To reduce the risk of accidentally breaking modals, we've released the modal refactor in a beta version first. Please test v3.2.25-beta1 and report any issues according to the instructions in the release notes.

Thanks!