search

infor-design / enterprise

Enterprise-grade component library for the Infor Design System
https://design.infor.com
Apache License 2.0
134 stars 81 forks source link

Dropdown: selection cleared in Edge with touch keyboard #7917

Open jonathanamiran opened 1 year ago

jonathanamiran commented 1 year ago

Describe the bug When using Windows Mobile/Tablet with a touchscreen, clicking on the dropdown causes the on-screen keyboard to appear, and as a result, the dropdown closes.

To Reproduce

Steps to reproduce the behavior:

  1. Start Windows Mobile with touch screen
  2. Go to https://design.infor.com/code/ids-enterprise/latest/demo/components/dropdown/example-index.html
  3. Touch the drop down
  4. See that it closes automatically when the online keyboard pops

I had some trouble reproducing it on my Windows machine, finally I found Microsoft Windows Simulator on my PC located in C:\Program Files (x86)\Common Files\Microsoft Shared\Windows Simulator\16.0\Microsoft.Windows.Simulator.exe (needs Visual Studio to be installed)

Expected behavior Onscreen keyboard shouldn't popup

In https://design.infor.com/code/ids-enterprise/latest/demo/components/dropdown/example-no-search.html it works well in Edge. Also in Firefox it works well

Version

Screenshots "real world" example (Edge):

https://github.com/infor-design/enterprise/assets/34129313/9fc0fe40-9094-42ce-b87a-897d2a1080c1

Microsoft Simulator example:

https://github.com/infor-design/enterprise/assets/34129313/1ace11d1-41fd-4b2c-aee4-cae819086a9f

Microsoft Simulator example Firefox: (checking the On-Screen keyboard first)

https://github.com/infor-design/enterprise/assets/34129313/f4a52461-333f-4d5a-98f2-d4772288033d

Platform

Additional context I couldn't test Chrome in Windows Simulator

tmcconechy commented 1 year ago

Tricky one. I dont have windows so cant confirm this right now but it does not happen on my IOS device. What is a windows simulator anyways (what does it simulate?)

Could try the no search option https://main-enterprise.demo.design.infor.com/components/dropdown/example-no-search.html as i expect its poping up so you can type to filter.

EdwardCoyle commented 1 year ago

We had a similar issue before on Android/iOS devices where any time an onscreen keyboard opens, our resize event handling on the body element is triggered, which can cause the popups to close prematurely.

Maybe check if this handler in the dropdown is triggered. Also, it might be good to test this on other devices involving an onscreen keyboard

tjamesallen15 commented 10 months ago

I tried checking what @EdwardCoyle pointed out but how do I test this in Microsoft Simulator? As I am checking its not available on my personal computer and cannot find any installer for this one. I also don't have a microsoft phone.

@jonathanamiran I am trying to find the installer online but can't seem to find a legitimate source of installer (what the ticket description mentioned above, Windows Simulator). It might be helpful if you could give me an installer for this one so that I can test it properly.

cc @ericangeles @tmcconechy @jonathanamiran @EdwardCoyle