Race condition between input events and layout transitions?

Been working on an app - just finished it. Well, two apps, a keyboard and a reminder thingy.

Anyway, keyboard uses drag events to get input, app takes touch inputs. Keyboard returns a promise which eventually resolves with the typed text. Works great. Only issue is what I think is the following race condition (determined with super high tech debug strategy console.logs):

1. User submits their text input using a drag gesture (on release, b == 0)
   
2. Promise resolves. Keyboard is unloaded.
   
3. App receives text, applies it, renders appropriate UI and menu
   
4. Lingering touch event caused by the same finger motion that resulted in event #1 resolves
   
5. App presses whatever button is now under where the user's finger was in step 1, leading them to a different menu or input than intended.
   
   

I can solve this pretty trivially by adding like a 50ms timeout between the user drag input release and the promise resolving, but I was wondering if anyone else has run into this issue?

I'm wondering if there's a potential enhancement out there to clear unresolved events when setUI() or equivalent is called, so that you don't have a bangle input event that starts while one UI is loaded and resolves when another UI is loaded.

EDIT: Another viable workaround might be to have submit operate on the 'touch' event instead. Might be a little cleaner than a setTimeout but less obvious to the reader.

EDIT: EDIT: Found this potentially relevant-but-not-precisely-identical github issue.
https://github.com/espruino/BangleApps/i­ssues/2754#issuecomment-1547357991

Thanks - yes, it's a bit tricky. I think the problem is that we're reporting events from the touchscreen controller itself, as soon as we get them - so to try and 'clear the queue' we'd have to set up something to ignore future events (it's not like we can just flush them).

This doesn't actually seem to come up that much, so honestly, I think the best solution for now is probably the timeout.