EPUB3 Javascript button click and other touch events on Javascript form are completely disabled if rendition layout is reflowable (= Scroll mode is OFF in Settings)

[sumahadevan]

In a simple EPUB3 with scripting (Javascript), the button click touch event does not work in R2 Reader on Android. This can be seen with the attached EPUB3 which implements simple addition, where it is impossible to click the button (the different pages try variations of the Javascript code, but the button touch event never works). However, by pressing the Return or Next Tab key on the Android touch keyboard it is possible to confirm that the addition gets correctly executed, so the issue is solely that touch input has been blocked (as can also been seen with trying to touch the second input text box, in addition to the click button).

The same EPUB3 (button-click-epub3.epub) works fine in the R2 Reader desktop app (with mouse input) and R2 Reader iOS app (with touch input).

Version and Device Details:
R2 Reader Android App version: 2.0.0
GitHub Tag: V2.0.0-beta.4
Android mobile device: Moto G3 running Android 6.0.1.

Note: I had to rename the .epub as a .zip to upload it (you may unpack it or rename it as .epub and then look at the code of individual XHTML pages, which is just basic Javascript).

button-click-epub3.zip

[sumahadevan]

One reason for the pages with different variations of the Javascript code in button-click-epub3.epub is that touch handling has to be consistent between standard click buttons and inputs of type "submit" (rendered by Javascript as buttons). This is an issue with R2 Reader on iOS (where button click does work but requires very hard press/touch for regular buttons, while press/touch is easy for submit buttons), and needs to be handled correctly on Android (when the basic button click works).

readium/r2-testapp-swift#239

[sumahadevan]

I tracked down the issue with is due to a setting in the code of the Android version or R2 Reader. In the Android version, in order to allow clicking of buttons and other inputs, the user has to go to Settings and turn Scroll mode ON in order for touch to work. This is due to the following piece of code in the navigator submodule file referenced below.

https://github.com/readium/r2-navigator-kotlin/blob/develop/r2-navigator/src/main/java/org/readium/r2/navigator/R2EpubActivity.kt

The relevant piece of code disables touch handling if the rendition layout is reflowable:

        override fun onPageSelected(position: Int) {
            if (publication.metadata.rendition.layout == RenditionLayout.Reflowable) {
                resourcePager.disableTouchEvents = true
            }

While handling dynamic Javascript along with Reflowable layouts is a practical issue, disabling ALL touch events is incorrect (I verified with another EPUB that hyperlinks dont work when scroll mode is off). Further, this is NOT consistent with iOS where touch (including buttons!) works even when the rendition layout is reflowable.

In scroll mode where touch events do work (a step forward), there are other touch issues that I will log separately.