Date picker - Mobile - Not interactive when scrolling + resizing bug

[0hra]

Flux version

v2.0.0

Livewire version

v3.5.19

Tailwind version

v4.0

What is the problem?

iOS + Safari
When scrolling on mobile the dialog is not interactive.
Also a weird resizing bug occurs sometimes.
See attached video.

date.picker.4.mov

Code snippets

<flux:date-picker />

How do you expect it to work?

I expect it to be interactive and that no weird resizing occurs when scrolling.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[jeffchown]

@0hra Strange. I can reproduce the issue. It is inconsistent, though.

[joshhanley]

@0hra thanks for reporting!

Ok this is a dark one... Get this - if the address bar is shown at full size, then the overflow:hidden that we have the HTML element works correctly. But if you've scroll the page down slightly first (and stopped), and the address bar at the bottom has shrunk down to it's small size, then the background can scroll fine, regardless of putting any scroll blocking stuff on the html or body elements 🤯

Scroll lock works fine like this----------------------Scroll lock doesn't work at all like this

[jeffchown]

@joshhanley Ouch. That's an annoying one.

[joshhanley]

@jeffchown yep! Can you confirm that the same happens for you?

[jeffchown]

Yup. Same behaviour here, @joshhanley

[joshhanley]

@jeffchown thanks for confirming!

[colinmac17]

I can also reproduce this issue.

When using wire:model.live=range, the experience on mobile also breaks because the modal has a "select range button" to confirm the range (only on mobile) so if using a DateRange object (null, null) get's passed in leading to a 500 error.

[joshhanley]

@colinmac17 were you meant to add a screenshot to your message or something? If not, can you?

[colinmac17]

@joshhanley yes sorry!

Screencast of error happening: https://share.cleanshot.com/xSgXbZB6

log:

[2025-02-20 22:22:21] local.ERROR: Invalid constructor parameters. {"userId":1,"exception":"[object] (Carbon\\Exceptions\\InvalidPeriodParameterException(code: 0): Invalid constructor parameters. at /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/nesbot/carbon/src/Carbon/CarbonPeriod.php:688)
[stacktrace]
#0 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/livewire/flux/src/DateRange.php(14): Carbon\\CarbonPeriod->__construct(NULL, NULL)
#1 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/livewire/flux/src/DateRangeSynth.php(59): Flux\\DateRange->__construct(NULL, NULL)
#2 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/livewire/livewire/src/Mechanisms/HandleComponents/HandleComponents.php(214): Flux\\DateRangeSynth->hydrate('last7Days', Array, Object(Closure))
#3 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/livewire/livewire/src/Mechanisms/HandleComponents/HandleComponents.php(342): Livewire\\Mechanisms\\HandleComponents\\HandleComponents->hydrate(Array, Object(Livewire\\Mechanisms\\HandleComponents\\ComponentContext), 'range')
#4 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/livewire/livewire/src/Mechanisms/HandleComponents/HandleComponents.php(295): Livewire\\Mechanisms\\HandleComponents\\HandleComponents->hydrateForUpdate(Array, 'range', 'last7Days', Object(Livewire\\Mechanisms\\HandleComponents\\ComponentContext))
#5 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/livewire/livewire/src/Mechanisms/HandleComponents/HandleComponents.php(98): Livewire\\Mechanisms\\HandleComponents\\HandleComponents->updateProperties(Object(App\\Livewire\\App\\Dashboard), Array, Array, Object(Livewire\\Mechanisms\\HandleComponents\\ComponentContext))
#6 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/livewire/livewire/src/LivewireManager.php(97): Livewire\\Mechanisms\\HandleComponents\\HandleComponents->update(Array, Array, Array)
#7 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/livewire/livewire/src/Mechanisms/HandleRequests/HandleRequests.php(94): Livewire\\LivewireManager->update(Array, Array, Array)
#8 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php(47): Livewire\\Mechanisms\\HandleRequests\\HandleRequests->handleUpdate()
#9 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Routing/Route.php(266): Illuminate\\Routing\\ControllerDispatcher->dispatch(Object(Illuminate\\Routing\\Route), Object(Livewire\\Mechanisms\\HandleRequests\\HandleRequests), 'handleUpdate')
#10 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Routing/Route.php(212): Illuminate\\Routing\\Route->runController()
#11 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Routing/Router.php(808): Illuminate\\Routing\\Route->run()
#12 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(170): Illuminate\\Routing\\Router->{closure:Illuminate\\Routing\\Router::runRouteWithinStack():807}(Object(Illuminate\\Http\\Request))
#13 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Routing/Middleware/SubstituteBindings.php(51): Illuminate\\Pipeline\\Pipeline->{closure:Illuminate\\Pipeline\\Pipeline::prepareDestination():168}(Object(Illuminate\\Http\\Request))
#14 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(209): Illuminate\\Routing\\Middleware\\SubstituteBindings->handle(Object(Illuminate\\Http\\Request), Object(Closure))
#15 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/VerifyCsrfToken.php(88): Illuminate\\Pipeline\\Pipeline->{closure:{closure:Illuminate\\Pipeline\\Pipeline::carry():184}:185}(Object(Illuminate\\Http\\Request))
#16 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(209): Illuminate\\Foundation\\Http\\Middleware\\VerifyCsrfToken->handle(Object(Illuminate\\Http\\Request), Object(Closure))
#17 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/View/Middleware/ShareErrorsFromSession.php(49): Illuminate\\Pipeline\\Pipeline->{closure:{closure:Illuminate\\Pipeline\\Pipeline::carry():184}:185}(Object(Illuminate\\Http\\Request))
#18 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(209): Illuminate\\View\\Middleware\\ShareErrorsFromSession->handle(Object(Illuminate\\Http\\Request), Object(Closure))
#19 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Session/Middleware/StartSession.php(121): Illuminate\\Pipeline\\Pipeline->{closure:{closure:Illuminate\\Pipeline\\Pipeline::carry():184}:185}(Object(Illuminate\\Http\\Request))
#20 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Session/Middleware/StartSession.php(64): Illuminate\\Session\\Middleware\\StartSession->handleStatefulRequest(Object(Illuminate\\Http\\Request), Object(Illuminate\\Session\\Store), Object(Closure))
#21 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(209): Illuminate\\Session\\Middleware\\StartSession->handle(Object(Illuminate\\Http\\Request), Object(Closure))
#22 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Cookie/Middleware/AddQueuedCookiesToResponse.php(37): Illuminate\\Pipeline\\Pipeline->{closure:{closure:Illuminate\\Pipeline\\Pipeline::carry():184}:185}(Object(Illuminate\\Http\\Request))
#23 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(209): Illuminate\\Cookie\\Middleware\\AddQueuedCookiesToResponse->handle(Object(Illuminate\\Http\\Request), Object(Closure))
#24 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Cookie/Middleware/EncryptCookies.php(75): Illuminate\\Pipeline\\Pipeline->{closure:{closure:Illuminate\\Pipeline\\Pipeline::carry():184}:185}(Object(Illuminate\\Http\\Request))
#25 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(209): Illuminate\\Cookie\\Middleware\\EncryptCookies->handle(Object(Illuminate\\Http\\Request), Object(Closure))
#26 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(127): Illuminate\\Pipeline\\Pipeline->{closure:{closure:Illuminate\\Pipeline\\Pipeline::carry():184}:185}(Object(Illuminate\\Http\\Request))
#27 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Routing/Router.php(807): Illuminate\\Pipeline\\Pipeline->then(Object(Closure))
#28 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Routing/Router.php(786): Illuminate\\Routing\\Router->runRouteWithinStack(Object(Illuminate\\Routing\\Route), Object(Illuminate\\Http\\Request))
#29 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Routing/Router.php(750): Illuminate\\Routing\\Router->runRoute(Object(Illuminate\\Http\\Request), Object(Illuminate\\Routing\\Route))
#30 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Routing/Router.php(739): Illuminate\\Routing\\Router->dispatchToRoute(Object(Illuminate\\Http\\Request))
#31 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(201): Illuminate\\Routing\\Router->dispatch(Object(Illuminate\\Http\\Request))
#32 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(170): Illuminate\\Foundation\\Http\\Kernel->{closure:Illuminate\\Foundation\\Http\\Kernel::dispatchToRouter():198}(Object(Illuminate\\Http\\Request))
#33 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/livewire/livewire/src/Features/SupportDisablingBackButtonCache/DisableBackButtonCacheMiddleware.php(19): Illuminate\\Pipeline\\Pipeline->{closure:Illuminate\\Pipeline\\Pipeline::prepareDestination():168}(Object(Illuminate\\Http\\Request))
#34 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(209): Livewire\\Features\\SupportDisablingBackButtonCache\\DisableBackButtonCacheMiddleware->handle(Object(Illuminate\\Http\\Request), Object(Closure))
#35 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/nova/src/Http/Middleware/ServeNova.php(23): Illuminate\\Pipeline\\Pipeline->{closure:{closure:Illuminate\\Pipeline\\Pipeline::carry():184}:185}(Object(Illuminate\\Http\\Request))
#36 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(209): Laravel\\Nova\\Http\\Middleware\\ServeNova->handle(Object(Illuminate\\Http\\Request), Object(Closure))
#37 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/barryvdh/laravel-debugbar/src/Middleware/InjectDebugbar.php(59): Illuminate\\Pipeline\\Pipeline->{closure:{closure:Illuminate\\Pipeline\\Pipeline::carry():184}:185}(Object(Illuminate\\Http\\Request))
#38 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(209): Barryvdh\\Debugbar\\Middleware\\InjectDebugbar->handle(Object(Illuminate\\Http\\Request), Object(Closure))
#39 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/ConvertEmptyStringsToNull.php(27): Illuminate\\Pipeline\\Pipeline->{closure:{closure:Illuminate\\Pipeline\\Pipeline::carry():184}:185}(Object(Illuminate\\Http\\Request))
#40 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(209): Illuminate\\Foundation\\Http\\Middleware\\ConvertEmptyStringsToNull->handle(Object(Illuminate\\Http\\Request), Object(Closure))
#41 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TrimStrings.php(47): Illuminate\\Pipeline\\Pipeline->{closure:{closure:Illuminate\\Pipeline\\Pipeline::carry():184}:185}(Object(Illuminate\\Http\\Request))
#42 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(209): Illuminate\\Foundation\\Http\\Middleware\\TrimStrings->handle(Object(Illuminate\\Http\\Request), Object(Closure))
#43 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Http/Middleware/ValidatePostSize.php(27): Illuminate\\Pipeline\\Pipeline->{closure:{closure:Illuminate\\Pipeline\\Pipeline::carry():184}:185}(Object(Illuminate\\Http\\Request))
#44 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(209): Illuminate\\Http\\Middleware\\ValidatePostSize->handle(Object(Illuminate\\Http\\Request), Object(Closure))
#45 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/PreventRequestsDuringMaintenance.php(110): Illuminate\\Pipeline\\Pipeline->{closure:{closure:Illuminate\\Pipeline\\Pipeline::carry():184}:185}(Object(Illuminate\\Http\\Request))
#46 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(209): Illuminate\\Foundation\\Http\\Middleware\\PreventRequestsDuringMaintenance->handle(Object(Illuminate\\Http\\Request), Object(Closure))
#47 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Http/Middleware/HandleCors.php(49): Illuminate\\Pipeline\\Pipeline->{closure:{closure:Illuminate\\Pipeline\\Pipeline::carry():184}:185}(Object(Illuminate\\Http\\Request))
#48 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(209): Illuminate\\Http\\Middleware\\HandleCors->handle(Object(Illuminate\\Http\\Request), Object(Closure))
#49 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Http/Middleware/TrustProxies.php(58): Illuminate\\Pipeline\\Pipeline->{closure:{closure:Illuminate\\Pipeline\\Pipeline::carry():184}:185}(Object(Illuminate\\Http\\Request))
#50 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(209): Illuminate\\Http\\Middleware\\TrustProxies->handle(Object(Illuminate\\Http\\Request), Object(Closure))
#51 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/InvokeDeferredCallbacks.php(22): Illuminate\\Pipeline\\Pipeline->{closure:{closure:Illuminate\\Pipeline\\Pipeline::carry():184}:185}(Object(Illuminate\\Http\\Request))
#52 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(209): Illuminate\\Foundation\\Http\\Middleware\\InvokeDeferredCallbacks->handle(Object(Illuminate\\Http\\Request), Object(Closure))
#53 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(127): Illuminate\\Pipeline\\Pipeline->{closure:{closure:Illuminate\\Pipeline\\Pipeline::carry():184}:185}(Object(Illuminate\\Http\\Request))
#54 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(176): Illuminate\\Pipeline\\Pipeline->then(Object(Closure))
#55 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(145): Illuminate\\Foundation\\Http\\Kernel->sendRequestThroughRouter(Object(Illuminate\\Http\\Request))
#56 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/vendor/laravel/framework/src/Illuminate/Foundation/Application.php(1220): Illuminate\\Foundation\\Http\\Kernel->handle(Object(Illuminate\\Http\\Request))
#57 /Users/colinmcatee/Code/ProductiveRecruit/productive-recruit-web/public/index.php(17): Illuminate\\Foundation\\Application->handleRequest(Object(Illuminate\\Http\\Request))
#58 /Applications/Herd.app/Contents/Resources/valet/server.php(167): require('/Users/colinmca...')
#59 {main}
"} 

[joshhanley]

@colinmac17 thanks!

[joshhanley]

@colinmac17 actually your issue looks different to this one, as you are getting a 500 error, where as this issue is a safari scroll problem. Can you open a new issue and share a Volt component that demonstrates the issue?

[colinmac17]

@joshhanley sure thing!

[colinmac17]

@joshhanley #1144