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
[Bug]: Extraneous scrollbar when selecting text field #31031
Comments
I am not able to repro this, could you provide the size of the screen in pixels? |
I'm still not able to repro it. I suspected it could be some invisible border or something that appears on focus, but setting the width exactly to before overflowing content and focusing on the textfield doesn't trigger the scrollbar. Could you recreate it maybe setting a div around it that allows scrolling? |
I used the Edge Browser zoom to 150% and it appears indeed at the bottom. It disapears when you change zoom to something less, like 125%. |
If you're having trouble reproing, maybe try a higher zoom level (such as 200%). Does your monitor have a native resolution of 1920 x 1080? The issue seems related to fractional pixels, so that might be a required part of the repro. Regarding setting a div around it, I'm not sure exactly what you're asking for. |
Glad you were able to repro. Just to clarify: do you agree this a bug when hosting the control inside a fixed-size container? Or do you consider this by design? |
@sopranopillow Just checking in again on my question above. Thanks! |
Hi sorry for the wait, I actually consider this by design. The root is meant to take the size of the input, so no overflow logic should be added. We do this in v9 as well. If the goal is to let the input resize based on scroll height, that should be dealt through JS like (react-textarea-autosize)[https://github.com/Andarist/react-textarea-autosize) does. |
@sopranopillow Thanks for the clarification. While investigating how to resolve this in our codebase, I realized that my repro was not consistent with what we're actually doing. We aren't setting overflow:auto on the root of the TextField. Instead, we're doing that on a div that contains the TextField. I've updated my codepen with a new, more accurate repro that doesn't depend on any custom styling of the TextField. If a TextField is contained in a fixed-size, scrollable container, it doesn't seem like the TextField should change its size just because it’s focused. Can you take a look? |
Hey @sopranopillow. Just following up. Do you consider the new repro I posted a bug, or by design? Thanks! |
hi @ehrenMSFT, I'm not able to repro this one. I'm following the same steps as before and just to confirm I'm doing it right, I'm doing this:
maybe a video of the repro would help. |
@sopranopillow Here's a video repro: My steps were:
|
Hi @ehrenMSFT, I've tried to repro this and got some of the other contributors to try it as well and we weren't able to repro it. FWIW I do think this would be a by design case. |
@sopranopillow Ok, thanks for checking. Regarding this being by design, what is the recommendation for hosting these controls inside a fixed-size, scrollable container, since their size changes when they're focused? We're getting bugs filed against our application, due to customers using various zoom levels that cause these scrollbars to appear. |
I was able to repro the issue! For me, it happened on Edge on Windows at 175% zoom. The cause was Edge calculating the I'm pushing a fix that adds |
@smhigley Awesome! Thanks for fixing it. |
Because this issue is marked as by design and has not had activity for over 3 days, we're automatically closing it for house-keeping purposes. |
I don't think this is considered By Design anymore. There's an open PR out that's intended to fix it. |
Hi @smhigley. Just curious what the status of the fix is. Thanks! |
Library
React / v8 (@fluentui/react)
System Info
Are you reporting Accessibility issue?
no
Reproduction
https://codepen.io/EhrenMSFT/pen/gOyKxeO
Bug Description
Actual Behavior
Text field is focused, but an unexpected horizontal scrollbar also appears down below.
Expected Behavior
Text field is focused.
Logs
No response
Requested priority
Normal
Products/sites affected
Microsoft Power Query
Are you willing to submit a PR to fix?
no
Validations
The text was updated successfully, but these errors were encountered: