'mobile' theme breaks other upload buttons

[ussher]

What is the current behavior? Describe the bug When TinyMCE is in a form that contains an upload button and the form is viewed on mobile and the 'mobile' theme is active the upload button is disabled. If TinyMCE is initialized to set the mobile theme to 'silver' the form upload buttons work as expected. The issue is the mobile version of tinyMCE is effecting elements outside its scope.

Please provide the steps to reproduce and if possible a minimal demo of the problem via fiddle.tinymce.com or similar. Here are 2 urls which contain the upload button and tinymce. The first has the default behavior of using the 'mobile' theme on mobile. https://hostsaba.com/issue1 The second has the 'silver' theme set on mobile: https://hostsaba.com/issue2

What is the expected behavior? The expected behavior is that when clicking on the UPLOAD A NEW IMAGE button on mobile that the native file selection system will open.

Something about the 'mobile' theme blocks this functionality from working.

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE? Tested on iPhone 7 on Safari browser.

[EkimChau]

Hi ussher,

The current behaviour on the mobile theme is expected. The tap to edit button will maximise the editor to full screen and will lock down all html elements outside of the editor in order to control scrolling and content bleed issues related to iOS safari's touch scroll and keyboard activation quirks. Being a forced fullscreen mode only editor components should be visible.

With the next version of iOS13, apple has improved their api around keyboards and so we can remove the lock down as you can experience with the silver theme, which should resolve the issue as the silver theme does not force fullscreen or do any screen locking.

Ekim

[ussher]

Hi @EkimChau, thanks for the reply I think you may be missing the point. See the button above TinyMCE, the one that is not part of TinyMCE. Its just a button on they page by itself. TinyMCE is interfering with that button.

That button is not part of TinyMCE or connected to it in any way, its just an upload button on the page.

• It works when TinyMCE is not loaded on the page.
• It works when TinyMCE on mobile is set to use 'silver' theme.
• It does not work when TinyMCE on mobile uses the 'mobile' theme.

Something from TinyMCE causes that button to stop working. The code from TinyMCE should not effect elements that are not connected to the editor is the issue.

--edit-- If it is related to the "lockdown when in fullscreen" feature of TinyMce 'mobile' then it should be limited to only when the editor is in fullscreen. Right now when the editor is closed and only the book icon shows, still the button is not usable. (see example in links.)

[EkimChau]

Thanks for clarifying that it happens when tap to edit has not been activated. When the editor has not been activated, there should be no locking or interference from TinyMCE 5.

Having a look at the way the input has been setup, it appears there could be a bug in the html and css structure in your example. When i inline css a big red border around the Input field, I can't see the red border. When i move the Input out of the <div class="qq-uploader"> delete all the inline styles and provide an Input Height so that the actual Input is visible, tapping the input opens the file upload and works.

Check the Dom structure and CSS to ensure the input element is physically clickable and receives the touch event, this should solve the issue. Theres position absolute top: 0; right: 0; with opacity: 0; set to the input field, i'm not clear why this is required, perhaps a different approach here could fix the problem :)

Ekim

[ussher]

Hi @EkimChau I've set up a super plain vanilla example with just the upload button and Tinymce here: 'Silver': https://hostsaba.com/issue/example2.html 'mobile': https://hostsaba.com/issue/example1.html

Here's a video of the issue: https://www.youtube.com/watch?v=n9gND0kqOGw

[EkimChau]

Hi,

The mobile example i used https://hostsaba.com/issue1, the latest /example1.html is 404.

When connected to the safari web inspector, the input file picker has a height of 0, which means it can't be 'tapped' Fixing the inline css so that it is visible to the dom should fix the issue.

<input accept=".png,.gif,.jpg,.jpeg,.heic,.heif" type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;">

Ekim

[EkimChau]

Hi Usher,

upon closer inspection, it appears our mobile css can reset the visibility of inputs fields to be hidden.

line 757 in skin.mobile.min.css input[type=file]::-webkit-file-upload-button { display: none }

This has the affect of 0 height, and therefore untouchable :)

We will fix this issue, in the interim you would need to override this style.

Ekim

[ussher]

Argh, sorry, that should be https://hostsaba.com/issue/example2.html https://hostsaba.com/issue/example.html

Thanks for identifying the cause of the non-clicking button. I'll get our system patched up.