Imgui Sokol app in touchscreen (emscripten/WASM) doesn't clear MousePos correctly

[Xadiant]

I created a simple app that shows the imgui demo menu and compiled with emscripten. It works as expected in the browser, but on my mobile browser (tested on firefox, chrome, and opera) the windows "stick" to the cursor and you cant escape it. See video below for behavior:

screen-20221213-130231.mp4

See this related issue from ImGui: ocornut/imgui#1470

Reading that resource I see that the MousePos needs to be set to (-FLT_MAX,-FLT_MAX), otherwise the cursor remains set to the positon at the event SAPP_EVENTTYPE_TOUCHES_ENDED, which means that the very next tap is always processed as at the old position first, which means that even though imgui released the window correctly on the previous frame, it is picked back up as if you never stopped dragging on the new frame.

I have tried hacking the code to fix this by adding a flag to the SAPP_EVENTTYPE_TOUCHES_ENDED event, and then before the simgui_new_frame(new_frame) call checking for that flag and resetting MousePos, but it only seems to partially fix the issue.

Here is a live example that you should be able to try out from your own phone: https://xadiant.github.io/imgui-app/

[Xadiant]

Further investigation:

I changed my flag workaround to a counter, and give a high number (30 frames or so) when touch end event. When that counter elapses, we set the mousepos to -flt_max. This is closer to working as expected, as you can move a window, and when you release, it shortly after nulls out the mouse location and subsequent interactions continue normally.

If you try my live example, you can see that there is a second issue, it seems that to tap and button or interact with widgets inside of a window you have to tap twice, once to get the focus of the window. It seems like the root of that issue is the events are being executed at the wrong time for imgui, or in an unexpected order?

[Xadiant]

Figured it out, see the SAPP_EVENTTYPE_TOUCHES_ENDED event case for example:

case SAPP_EVENTTYPE_TOUCHES_ENDED:
            _simgui_add_mouse_button_event(io, 0, false);
            _simgui_add_mouse_pos_event(io, ev->touches[0].pos_x / dpi_scale, ev->touches[0].pos_y / dpi_scale);
            break;

The _simgui_add_mouse_button_event() is called before _simgui_add_mouse_pos_event(), which queues imgui mouse events int he wrong order. Basically in my symptoms, the button click was being evaluated in imgui at an old location. If you simply flip the order for the two functions calls (in all the relevant TOUCHES events) then interaction is normal in imgui.

This does not solve the the other problem though: Things continue to be hovered after you are no longer touching. Example: Tap a button and observe it stays in the "active" state. This is where we need to find a good way to set the mouse to (-FLT_MAX, -FLT_MAX) exactly 2 frames after imgui handles the touch up event.

I will create and submit and pull request for the position/button event order issue.

[floooh]

Wow, many thanks for the investigation! I'm very aware of the problem (it worked at one point, but then either an ImGui update, or my rewrite of the input system to evented input broke it). I'm currently on vacation, dabbling with emulator coding, but if the PR looks simple and is easy to test (I can do some testing on my Android phone) I can merge a PR any time before (otherwise sometime early January).

[floooh]

Closing the issue as the PR #760 has been merged.