cospend-nc
cospend-nc copied to clipboard
julien-nc
Keyboard on mobile Devices does not work on latest app
Hallo, I did update to the 1.5.14 and suddenly onscreen keyboard stop working on Android and iOS devices. I can't troubleshoot now from the vacation because have only mobile phone. But here attached video.
https://github.com/julien-nc/cospend-nc/assets/6813635/c538613c-470d-4886-b851-1736a36dd610
Hey, thanks for the bug report. I can reproduce it. No idea why this happens though. Something is preventing the focus on bill edition fields.
I found a workaround: Press the top left back arrow, open the left sidebar (top left hamburger icon next to "New Bill"), then close the left sidebar and select a bill again. Then it works fine.
Cospend's frontend does not mess with the focus. I suspect something is wrong with the @nextcloud/vue library components. This issue might be solved there at some point.
One discovery: If I set Safari to Responsive Mode, widths below 500px have the problem (when the label for the text box is above the text box itself). Widths above 500px (when the field labels flow to the left-hand side, same line as the text entry boxes) do not have this problem.
First image below is the problem (text fields will not focus) using Safari responsive mode. Second image is a wider viewport allowing focus on those text fields.
The workaround from @julien-nc is not working consistently (for me, at least!) running Nextcloud 28.0.2 and CoSpend 1.6.0 and using an iPhone 14 running iOS 17.3. On iOS/iPhone + Safari I can never get the keyboard to appear. On macOS + Safari running in Responsive Mode...if I change the viewport width back/forth a couple times, then I can get the text entry working when the viewport is small (phone-sized).
Fwiw, the console log has an error: "ResizeObserver loop completed with undelivered notifications." However, it does not appear with any consistency when I am reproducing the error. Might be unrelated.
Experiencing the same issue with Firefox on Android. Mine seems to be cause by opening the dialog to select a file and is fixed by the workaround consistently.
I don't have an Android device to test with, but I noticed that by using Chrome browser in responsive mode (to get a narrow viewport) on a Mac desktop I could (a) trigger the bug and (b) consistently use the work-around.
Safari/WebKit is where the work-around does not seem to work.
Still the same with 1.6.1 (Nextcloud 28.0.3). Workaround is just fine (but annoying).
Hi @julien-nc, I tried to debug this issue and found out that the fields (happens on both text fields and multiselect) are blocked from interactions on screens having width < 512 px
I searched for references in cospend's code without success, so maybe the issue is indeed in the vue libraries.
@julien-nc I found out a related issue on vue's repo: https://github.com/nextcloud-libraries/nextcloud-vue/issues/5385
When clicking on the textarea, the focus is attached to the logo link instead of the textarea when width < 512px.
width 511px:
width 512px:
I just updated my Nextcloud to 28.04, but the issue still persists on my iPhone 12 Pro Max with iOS 17.3.1.
What infos can I give you to help solve the problem?
The work-around does not work for me with latest Firefox and Safari on an iPhone SE with iOS 17.4.1
just updated to NC 29.0.0 and it still doesn't work. What infos can I provide to help solve this?
it's still the exact same behaviour as shown in the video in the first comment.
Btw you also cannot create a project on the mobile web view because of that issue.
