Enterprise: Form Spinbox Component: The page skips and the text gets zoomed in each time you click on the "-" or "+" button

[CindyMercadoReyes]

Describe the bug
Form Spinbox Component: The page skips and the text gets zoomed in each time you click on the "-" or "+" button

To Reproduce
Steps to reproduce the behavior:

1. On iOS Iphone X
2. Go to url: http://4120-beta0-enterprise.demo.design.infor.com/components/form/test-spinbox-compound-field.html
3. Click on the "-" or "+" button for the Age 2 spinbox
4. The page skips and the text gets zoomed in each time you click on the "-" or "+" button

Expected behavior
The page should not skip nor should it zoom in each time the user clicks on minus or plus symbol

Screenshots
If applicable, add screenshots to help explain your problem.
None
Platform

• Device: iOS iPhone X

Additional context
Add any other context about the problem here.
None

[tmcconechy]

Does this happen on http://4120-beta0-enterprise.demo.design.infor.com/components/spinbox/example-index.html ?

[CindyMercadoReyes]

Hi Tim, Yes it happening on http://4120-beta0-enterprise.demo.design.infor.com/components/form/test-spinbox-compound-field.html

Thanks,
Cindy

[tmcconechy]

But what about http://4120-beta0-enterprise.demo.design.infor.com/components/spinbox/example-index.html ?

[EdwardCoyle]

@tmcconechy confirmed that this is a bug on any iOS spinbox.

We fixed this bug on other components, which is related to focusing an input/button element that does not have a 16px-based font size as the default. iOS Safari automatically tries to zoom into the text to make it appear as if it's 16px-sized font. It does this as an attempt to improve accessibility. In many cases, people just report this feature as a bug.

For example, in Dropdown, we do this when the list opens, and the reverse when the list closes.

We need a similar feature when Spinbox buttons are clicked. The Zoom Component manages the events for this.

[tjamesallen15]

Hi @tmcconechy,

I'm not sure how to reproduce the error. I tried several ways and links but was failed to do so..

I tried uploading a video on my drive. Here's the links..

localhost:4000/components/form/test-spinbox-compound-field.html
https://drive.google.com/open?id=10Cem1UqSx50iqY6QSnAegAS1GW7TFOTr

localhost:4000/components/spinbox/example-index.html
https://drive.google.com/open?id=1JJPgTscw3Vth8l96IJo8b1L-GVMHVVhh

Thank you

[tjamesallen15]

After investigating the problem..

1. No errors on xcode iPhone simulator (see post above for video samples)
2. I found out the error occurs on browser stack.
3. I tried it on a real iPhone device just to make sure that the error doesn't occur only in browser stack.

I will look on this issue, @tmcconechy. Please ignore what I have said on not reproducing the error on my first post. Thank you!

[janahintal]

QA Passed. Moving to Done.
Tested in: https://4140-beta0-enterprise.demo.design.infor.com/components/form/test-spinbox-compound-field.html [Iphone X and Ipod Touch devices]