[BUG]: Screen is not Stable While Playing with Interactions of Explorations in Offline Mode on Android

[adityanarayanm095]

Describe the bug

While Playing with explorations in offline mode on Android Screen does not remain stable while I give the input answer. Which is quite annoying.

Steps To Reproduce

1. On your Mobile Visit https://oppiatestserver.appspot.com/explore/16
2. Keep going onward by answering
3. For Question no. 5 i.e Set Input. Try entering a word that has nearly no rhymes. I am specifically looking for any of three popular ones. You can not answer at one time because screen disappear after entering one letter that you can see in the screencast.

Expected Behavior

The screen must be fixed so that one can type a word in one shot.

Screenshots/Videos

screen-20221123-093339.mp4

What device are you using?

Mobile

Operating System

Android

What browsers are you seeing the problem on?

Chrome

Browser version

107.0.5304.105

Additional context

No response

[kevintab95]

Hi @Lawful2002, can you please help assign this to someone in the LaCE team who can fix it? Thanks!

[kevintab95]

I am unable to reproduce this on a physical mobile device.

Screenrecorder-2022-12-08-00-47-15-83.mp4

Closing for now.

[kevintab95]

Per discussion with the reporter, it seems the error happens in the "set input" interaction. Here's a video showing the same.

Screenrecorder-2022-12-09-03-06-36-309.mp4

Note that I am able to type in the text, but the keyboard seems to flicker.

Edit: This currently happens on production.

Screenrecorder-2022-12-09-03-16-02-672.mp4

[SubhashThenua]

Hi @kashishbhandula
Could you please provide me expected date when you plan to open the PR?
thanks!

[kashishbhandula]

Hi @kevintab95 , @SubhashThenua , Is there some way I can generate this issue on the laptop?

[kashishbhandula]

Hi @kevintab95 , @SubhashThenua , just a friendly reminder can generate this issue on the laptop?

[kevintab95]

Not sure, sorry. It looks like this is only reproducible on physical mobile devices..

[hemantmm]

Hi, @kevintab95, @prafulbbandre, @seanlip, @SanjaySajuJacob can u help me that how can I reproduce this issue on my laptop?

[seanlip]

@hemantmm See Kevin's response above (and in general please also read the entire thread carefully). Can you try it on a physical mobile device?

If so, then it's a legitimate bug, but you might need to investigate more about how to repro it locally (I don't know offhand).

[hemantmm]

Ok, @seanlip will have a look at it.

[kapilag96]

I was able to test it on a mobile by launching a dev server with host checking disabled (python -m scripts.start --disable_host_checking) and creating a new exploration with a set input. Now you can open the dev instance of the website on a mobile in two ways. Note that you will not be able to login (a network error). Luckily you don't need to login to launch an exploration.

• Launch an android emulator on your desktop and open 10.0.2.2:8181 on the emulator's browser.
• If your desktop and mobile are on the same network, open <desktop_ip>:8181 on your phone.

This is just a theory but the reason we see the keyboard flicker is because the entire list field rerenders each time we enter a text input. So the entire list disappears (making the keyboard disappear) and then renders again (making the keyboard appear). Similar issue is also observed with react.

[rahat2134]

It is also observed in exploration editor specially with text input interaction ->
screen-capture.webm