Skip to content

[SwipeableDrawer] Can't scroll drawer content if anchor="bottom" and Virtual Keyboard is open #45730

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Aleksan4e3 opened this issue Mar 28, 2025 · 3 comments
Assignees
Labels
component: drawer This is the name of the generic UI component, not the React module! component: SwipeableDrawer The React component. external dependency Blocked by external dependency, we can’t do anything about it waiting for 👍 Waiting for upvotes

Comments

@Aleksan4e3
Copy link

Aleksan4e3 commented Mar 28, 2025

Steps to reproduce

Steps:

  1. Open this link to live example: (https://7ppfwt.csb.app/)
  2. Click on 'Bottom'
  3. Click on Input field
  4. When Virtual Keyboard will be open, try to scroll

Current behavior

I can't scroll to the end.

Expected behavior

I can scroll to the end

Context

No response

Your environment

IOS 18.3.2
Browser - Chrome 134

Search keywords: SwipeableDrawer

@Aleksan4e3 Aleksan4e3 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Mar 28, 2025
@zannager zannager added component: drawer This is the name of the generic UI component, not the React module! component: SwipeableDrawer The React component. labels Mar 31, 2025
@DiegoAndai
Copy link
Member

Hey @Aleksan4e3, thanks for the report. I'm still able to scroll with the keyboard

All.Photos.-.1.of.1.mov

Is your issue that you're not able to reach the end? Have you tried adding padding when the input is selected?

@DiegoAndai DiegoAndai added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Mar 31, 2025
@Aleksan4e3
Copy link
Author

Aleksan4e3 commented Apr 1, 2025

Hey @Aleksan4e3, thanks for the report. I'm still able to scroll with the keyboard

All.Photos.-.1.of.1.mov
Is your issue that you're not able to reach the end? Have you tried adding padding when the input is selected?

Hello @DiegoAndai, thanks for the quick reply. Yes, my issue that I am not able to reach the end.
I adjusted example to add padding bottom if keyboard is open. Also I added some input fields to the middle and to the end.

video_2025-04-01_20-52-57.mp4

Now if I click on First input all works as expected. But there are some others cases:
1-st:

  1. Click 'Bottom'
  2. Click on 'TextStart' input.
  3. Click on 'TextEnd' input.
    Result - I see empty space in the bottom
    Expected - no empty space in the bottom

2-nd

  1. Click 'Bottom'
  2. Click on 'TextEnd' input.
  3. Try to scroll to the start
    Result - I am not able to reach start
    Expected - I can reach start

PS. I think the reason is different 'viewport resize behavior' link. I added 'interactive-widget=resizes-content' meta tag in index.html to fix behaviour on Android. But it's not supported for IOS

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Apr 1, 2025
@DiegoAndai DiegoAndai added external dependency Blocked by external dependency, we can’t do anything about it waiting for 👍 Waiting for upvotes and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Apr 9, 2025
@DiegoAndai DiegoAndai assigned siriwatknp and unassigned DiegoAndai Apr 9, 2025
@DiegoAndai
Copy link
Member

I think this is an external dependency issue, and it will have to be handled differently depending on different browsers or OS.

I added the waiting for 👍🏼 label so the community can vote for this fix. If you want to see this implemented, please add a 👍🏼 reaction to the issue's description.

Sorry I can't be of any more help at this moment, I'm not familiar enough with Android/iOS differences to come up with a workaround. If someone has one, sharing it would be greatly appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: drawer This is the name of the generic UI component, not the React module! component: SwipeableDrawer The React component. external dependency Blocked by external dependency, we can’t do anything about it waiting for 👍 Waiting for upvotes
Projects
None yet
Development

No branches or pull requests

4 participants