Form input fields not working at screen width less than 512 px

[bobbadshy]

Please use the 👍 reaction to show that you are affected by the same issue. Please don't comment if you have no relevant information to add!

Describe the bug
Form input fields stop working at screen width less than 512 px. Text entry fields cannot be selected anymore, dropdown lists will not appear. This renders forms unusable on small screens, namely on smartphones.

To Reproduce
Steps to reproduce the behavior:

1. Create a test form with some text entry and dropdown answer lists.
2. Open the form in view mode on a smartphone (or, enable device mode in browser dev tools and lower horizontal screen size to below 512 px, tested in Chrome dev tools)
3. Entry fields become unresponsive.

Expected behavior
Form entry fields should stay responsive and usable at small horizontal reolutions.

Screenshots
Working at 512xp:

Not working at 511px:

Systeminfo:

2024-05-04.md

Nextcloud (please complete the following information):

• Nextcloud-Version: 29.0.0.19
• Forms-Version: 4.2.3

Desktop (please complete the following information):

• OS: Linux
• Browser Chrome
• Version 123.0.6312.105

Smartphone (please complete the following information):

• Device: Motorola g(7)
• OS: [e.g. iOS8.1]
• Browser Chrome
• Version [e.g. 22]

Browser log

Dev tools show no log output when clicking entry fields.

How to access your browser console (Click to expand)

Chrome

• Press either CTRL + SHIFT + J to open the “console” tab of the Developer Tools.
• Alternative method:
  1. Press either CTRL + SHIFT + I or F12 to open the Developer Tools.
  2. Click the “console” tab.

Safari

• Press CMD + ALT + I to open the Web Inspector.
• See Chrome’s step 2. (Chrome and Safari have pretty much identical dev tools.)

IE9

1. Press F12 to open the developer tools.
2. Click the “console” tab.

Firefox

• Press CTRL + SHIFT + K to open the Web console (COMMAND + SHIFT + K on Macs).
• or, if Firebug is installed (recommended):
  1. Press F12 to open Firebug.
  2. Click on the “console” tab.

Opera

1. Press CTRL + SHIFT + I to open Dragonfly.
2. Click on the “console” tab.

Additional context
Add any other context about the problem here.

[bobbadshy]

While I am not primarily a JS or Vue developer, if you can point me to the source where this bug originates, I might even be able to propose a PR for it :).

[Chartman123]

@susnux Is this a bug in the vue lib?

[susnux]

I do not think so as it works on the styleguide

[tmlmt]

I posted a similar but different issue in #2145: I can't edit forms on my mobile device.

This issue made me realize when I switch the device to landscape mode, things work (for issue 2145), but not in portrait mode.

There seems to be generally speaking quite some responsiveness issues on mobile devices? (editing, filling out, viewing, ...)

[Chartman123]

@tmlmt So why do you think that your bug is different than this one here? It seems like this bug here is connected to the screen width (which in landscape mode is of course much bigger than in portrait mode).

Edit mode and submit mode both use the same input fields, so they are both probably connected. Could you please check if you also can't enter any input in submit mode and if it works in landscape mode?

[sven-verkstedt]

Awesome guys! Thx for the quick fix 👍 :)

[Chartman123]

@sven-verkstedt It will still take some time until the fix will be available... :)

[susnux]

Release is scheduled for today of the library so we might be able to release an app update next week :)