Closed aslynblohm closed 7 months ago
ghost
commented
1 year ago Hello aslynblohm, thank you for opening an issue with us!
I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌
yejuntak
commented
1 year ago Suggested Solution
Change of font size in the text field to 16px (2px increase from previous design) and users can add a font-size custom property will resolve the issue. We have to check different browsers on both android and iOS after we increase the font size in the text field.
Expected behavior A clear and concise description of what you expected to happen.
There should be no zooming in on the people picker input as it cuts off part of the field and is distracting to the user.
Screenshots If applicable, add screenshots to help explain your problem.
Environment (please complete the following information):
OS: [e.g. iOS] iOS Browser [e.g. edge, chrome, safari] Framework [e.g. react, vue, none] React Context [e.g. Microsoft Teams, SharePoint, Office Add-ins, Web] Teams Version [e.g. 0.1] Provider [e.g. Msal2Provider] (bonus if you share the provider config)
Describe the bug When tapping on the people picker component on mobile iOS devices (doesn't seem to repro on tablet), the device zooms in to the people picker search box, which can take the user out of the flow of work.
Some research on the issue suggests that this occurs because the font-size of the input is less than 16px (https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone). Since there's no css custom property for font-size for the people picker, I'm unable to verify if this would fix the issue.
To Reproduce Steps to reproduce the behavior:
Tap on the people picker on an iOS mobile device and notice the zoom. Please reach out to me on Teams and I can provide a video and snapshots of this occurring.
Expected behavior A clear and concise description of what you expected to happen.
There should be no zooming in on the people picker input as it cuts off part of the field and is distracting to the user.
Screenshots If applicable, add screenshots to help explain your problem.
Environment (please complete the following information):
Additional context Add any other context about the problem here.
If changing the font size to 16px or higher fixes the problem, a solution could be just to add a font-size css custom property so that folks can control their own destiny.