search

woltapp / wolt_modal_sheet

This package provides a responsive modal with multiple pages, motion animation for page transitions, and scrollable content within each page.
MIT License
512 stars 65 forks source link

Sticky action bar covers input fields when keyboard is visible #305

Closed Albertbol closed 3 months ago

Albertbol commented 3 months ago

Bug report

When a sticky action bar is used in WoltBottomSheetType with a fixed height of 100px, and a SizedBox of 100px is added at the bottom, tapping on the input field causes the sticky action bar to fly up and cover the input field.

Steps to reproduce

Steps to reproduce the behavior:

Described above

Expected behavior

Sticky action bar should not maybe come up, or no cover input field.

Additional context

Add any other context about the problem here.

ulusoyca commented 3 months ago

Hi, Can you provide a Screen recording? You should be able to add bottom padding larger than 100px to your main content which will make your main content visible, or scrollable.

Albertbol commented 3 months ago

Hey, with bottom padding you mean sized box in the bottom of mainContentSliversBuilder, correct? Than i tried it, did not help.

https://github.com/user-attachments/assets/df9e0e7c-d6e4-4b82-9e7b-73c127fb05da

ulusoyca commented 3 months ago

I mean this example: https://github.com/woltapp/wolt_modal_sheet/blob/main/coffee_maker/lib/home/online/modal_pages/add_water/water_settings_modal_page.dart#L35

You can test the sample app and check the water setting.

Albertbol commented 3 months ago

What would be equivalent for SliverWoltModalSheetPage as i have: mainContentSliversBuilder which expects List of widgets.

Albertbol commented 3 months ago

I got the same result with example above, tried with WoltModalSheetPage like in the link you have sent.

Albertbol commented 3 months ago

Try the water settings on your phone you will get the same result: https://coffeemakerexample.web.app/ It will cover water temperature field. Tested on iPhone 13.

https://github.com/user-attachments/assets/55bf6383-723d-4982-a012-32447c2ede54

ulusoyca commented 3 months ago

Can you try this? https://github.com/woltapp/wolt_modal_sheet/pull/306/files#diff-72fd825ad17ce7800a2078e06f0dff1e12836ee59760465e78d9a5d222cebd15R139

Albertbol commented 3 months ago

Nope its not fixing input focus issue, still the same.

ulusoyca commented 3 months ago

Are you using scrollPadding in your text field?

Albertbol commented 3 months ago

Nope, I was not using it. Tested and this issue can be solved with it, but basically, I need to add scrollPadding equal to the bottom-sized box padding multiplied by 2 to see the input. Is that how it's supposed to be, and is that the solution?

ulusoyca commented 3 months ago

Unfortunately, I would only suggest you to use the value that can solve the height. We are working on solving this in a way that you wont need to consider the bottom padding because the entire page will be a widget.

Albertbol commented 3 months ago

Ok thank you @ulusoyca for so quick responses on the open source project and also for such a great project itself. 👏

ulusoyca commented 3 months ago

Happy to hear! Please consider giving a star on Github and like on pub.dev which helps us to get more resources to spend on this project 🥳