Upload fields not working on mobile

Get Help
, , , , ,
1

Howdy!

I’ve been battling first line of support for 3 weeks now.

Maybe somebody knows here:

BUG:

  • upload field not working if it’s in a div that is set to “display:none”.

Device Type: iPhone (Safari / Chrome)

Example:
https://excitement-malvaceous-3fdd22.gravitydemo.com/12345-2

How to test:

  1. Open Chrome
  2. Open Console (F12)
  3. Click on Toggle Device Toolbar (CTRL-SHIFT-M)
  4. Set device to Iphone SE
  5. Reload the page — IMPORTANT ----
  6. Click “Show Form” button
  7. Click “Select Files”

RESULT: no file picker shows up.

PROOF:
Here is a recording of the issue on an actual iPhone device recorded by my co-worker:

This works on Desktop, Android devices, but not on iPhone.

This bug is also tested in Browserstack - same result.

The case comes from a tabbed interface where there are 4 forms and one of the forms (last in the list) has an upload field.

PS: here is the full code I use:

<button id="showButton">Show Form</button>
<div id="test123" style="display:none;">[gravityform id="24" title="true"]</div>


<script>
      // Get references to the elements
      const test123Div = document.getElementById('test123');
      const showButton = document.getElementById('showButton');

      // Add a click event listener to the button
      showButton.addEventListener('click', function() {
          test123Div.style.display = 'block';
      });
  </script>
2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.