Enterprise: Timepicker: AM/PM picker is out of position on Android devices

[brianjuan]

Describe the bug
Timepicker: AM/PM picker is out of position on Android devices

To Reproduce
Steps to reproduce the behavior:

1. Open browsers in Android
2. Go to http://4180-beta0-enterprise.demo.design.infor.com/components/timepicker/example-index.html
   and http://4180-beta0-enterprise.demo.design.infor.com/components/timepicker/example-validation.html
3. Open time picker, then open AM/PM dropdown
4. See issue: AM/PM picker is out of position

Expected behavior
Picker position should be correct

Version

• ids-enterprise: v4.17.0 - v4.18.0-beta0

Screenshots

Platform

• Android browsers

Additional context
No additional context.

[tmcconechy]

Verified this on a Pixel 2 Chrome, This last worked in 4.15

[davidcarlsonberg]

This seems to have been solved. Perhaps alongside the issue @tmcconechy mentions above.

[brianjuan]

Yeah it's now fixed, verified on master and 4.18.0, thanks @davidcarlsonberg for noting.

[SofiK]

Hi! I can still reproduce this issue in https://design.infor.com/code/ids-enterprise/latest/demo/components/timepicker/example-index.html by changing to mobile mode in Dev tools in chrome and clicking the AM/PM Field (It's opened above the first field instead of the third field)

Also I cannot see the x icon at all when running locally, but perhaps that's just a local issue..

[brianjuan]

Thanks @SofiK , yeah issue still happening. I misread the issue, I thought it's about the misaligned X icon.

[tmcconechy]

Im not seeing the issue with the dropdown issue on the actual devices. Which device in chrome is it your using? The problem is that chrome dev tools arent actual devices so its not really accurate. I think that the detection to show an X isnt working since it still thinks the browser is chrome.

@davidcarlsonberg ?

[SofiK]

I've seen it in Android (Samsung Galaxy S7), but also on my computer in Homepages in smaller view even without using dev tools (but then the timepicker is located to the right of the screen) So if it's "close" to the right border it is opened over the first field instead.

[SofiK]

For example here (I've edited the example to include 3 timepickers)

[davidcarlsonberg]

I do see the issue if you edit the example to have three time pickers in Chrome on a desktop. I do not see the issue on Android. However I do see this:

So, my opinion, this issue should remain reopened. A new test page with multiple time picker should be created to address the issue. And, I think, a new issue should be opened for the thing on Android mobile that I include here (black box "AM").

[CindyMercadoReyes]

Issue on Android when opening the time picker on the Calendar for RTL. Steps below:

1. Open the calendar
2. Click on the drop down list box for minutes
3. When the user clicks on the drop down list box the list box appears on the left hand corner of the UI.
4. Please see screen shot attached.

[brianjuan]

Upon further investigation, the issue happens on Samsung Galaxy S7, S8, S9 and LG G5.
But not on S8+,S9+ and Google Pixel devices. I also tried on actual Samsung Galaxy S8+ and the issue is not happening.

[brianjuan]

I do see the issue if you edit the example to have three time pickers in Chrome on a desktop. I do not see the issue on Android. However I do see this:

So, my opinion, this issue should remain reopened. A new test page with multiple time picker should be created to address the issue. And, I think, a new issue should be opened for the thing on Android mobile that I include here (black box "AM").

Hi @davidcarlsonberg , there is already an issue I created last December for the black tooltip, see #1446 . Thanks.

[CindyMercadoReyes]

This issue is now resolved.