After launching a new website http://fifthgear.com.au, I found that non-administrator users on an iPad/iPhone creating or editing nodes with the Autocomplete widget field (in this case Entity Reference to a user) could not select a result in the drop down when the fields are displayed using the Foundation theme.

I see this has been an issue in the past https://www.drupal.org/node/2044595 but has been fixed. However, there is still an issue with iPad and iPhone.

I've attached a screenshot of what I mean. Those drop down items can't be selected.

Steps to reproduce.

  1. Set up user that doesn't have permissions to use Admin overlay or view Admin theme (so they get Foundation styled fields when editing nodes etc)
  2. Create a content type with a field that uses Autocomplete widget (eg. Entity reference user)
  3. On an iPad/iPhone, create a node of that type with the User created previously
  4. Type in the first few characters so results appear in the drop down under the Autocomplete field
  5. Tap one of the results

You'll see that it just leaves the letters you typed in and doesn't select the item you tapped.

This happens in both Safari and Chrome iOS.

This is specifically a Foundation issue, because I switched the theme to Bartick and the field worked fine on my iPad and iPhone.

I've gotten out of trouble by changing the field to a Select List, but we have thousands of users to select from and the Autocomplete widget is much better on a mobile device.

I'm happy to give access to my website to one of the Drupal Foundation theme developers so they can take a closer look.

CommentFileSizeAuthor
IMG_0576.jpg277.6 KBspanners

Comments

spanners’s picture

spanners commented

Can I get some help with this issue please? My client is crying out for this because at the moment, they need to use a drop down instead of the autocomplete widget, and the number of results is massive.

FiLeVeR10’s picture

FiLeVeR10 commented

@Spanners can this be reproduced outside of ios devices, or does it only occur in those conditions?

If not, can you plug your iphone into the computer and use safari to debug and post any console errors.

See: http://moduscreate.com/enable-remote-web-inspector-in-ios-6/

If the javascript that show results for autocomplete is functioning, then it is loading the javascript, but there could possibly be an error when it goes to add in the new value.

Please post any findings, and I'll do what I can to help you resolve the issue.

spanners’s picture

spanners commented

Thanks for the link. I set it up and there are no console errors that seem to show why I can't select any of the drop down autocomplete options. Only 5 [Warning] Unexpected CSS token: : (55cde5b5.css, line 1)
.icon-rotate-90 {
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg)
}

This doesn't seem like it has anything to do with my issue.

I also installed a fresh Foundation theme on a new Drupal install and the dropdown works fine. So it looks like it is just this website with the issue. So not a Foundation theme issue.

I tried adding a position: relative; and z-index:9999; to see if there was something covering the field, but this didn't help.

I also tried turning off topbar, but that didn't help either.

Also changed the jQuery version to other versions in the jQuery Update module. This didn't help either.

So annoying that I can't diagnose what's going on.

spanners’s picture

spanners commented

Definitely not a CSS issue. I temporarily changed the name if the CSS file and reloaded, so no styles loaded. And still couldn't select any of the drop-down options.

spanners’s picture

spanners commented

Still having an issue with this. Managed to duplicate this issue on another website - http://aime.org.au/nurse/register

The first field as you register is an Autocomplete term widget (tagging) and if you type in UWS, the University of Western Sydney (UWS) appears but you're unable to tap it or any other result on an iOS device.

Would REALLY like some help diagnosing this. My JS and AJAX knowledge is very limited.

fazeela’s picture

fazeela commented

@Spanners, Don't know whether you've managed to fix this or not.
But here is a solution for fixing this in Drupal 8, https://www.drupal.org/node/2852380