Select dropdown boxes not working on Android Chrome and Firefox - javascript

UPDATED 5/20 with resolution!
After much research, I found out the issue had to do with the fastclick JS plugin not working well with older versions of android. I added the class "needsclick" to the the select box and VOILA! -- I am able to select the box now in older Android version (4.2).
It appears the fastclick was causing a double "touchstart" event, so the select box was opening and then closing again because of a double click.
Original Post
I am having trouble getting a select box to work on Android device. It works on all other devices, but on certain android devices, I'm unable to select the box. It looks as if it's getting highlighted, but the options never open.
Here are examples of the select box that are not working in android:
[examples removed]
I have tried to play around with the positioning but am still getting this error. The site is hosted on Bigcommerce, but I don't think that is the issue. Wondering if anyone has had this issue before or might know a workaround?

Related

Wrong clickable area of a button on mobile

This is my website.
I'm currently working on multi-choice filters, or rather on resetting them. There is no problem on PC.
Click the X button and it clears the filter
But the same simple thing doesn't work like this on mobile devices. I don't understand why.
You need to click an area below the X button, well below, to dismiss the filter.
This is how you need to click to make it work
Also, I just realized that when clicking like this there is an error in the console.
Error in the console after successful dismissing
I'm testing the mobile behavior in Opera (PC version, last update) using the Inspector with mobile simulation; the device is irrelevant. You can try it too.
The same behavior occurs on an actual android, both in Chrome and Opera.
Side notes!
If you activate the dropdown search in any multichoice field, while it's visible, the close buttons work perfectly well and precisely on mobiles. (Although the behavior of this dropdown panel is weird too. It does not always drops down when focusing on a field, as it does on PC.)
When I tried to locate the close button using the console and Jquery and then applied .click(), it worked. So I guess the problem doesn't lie in JS.
If you want to test it on a phone choose the Desktop site. On the mobile view, though, another peculiar thing occurs-the blue X button to the right of the field doesn't work.
PS. I've been wracking my brains for 3 hours to solve this mystery, yet no result. Please help!
The culprit was the "chosen" plugin. Don't use this crappy plugin. They simply don't support mobile devices and have tons of bugs.
I switched to Select2 and everything is great.

Why dynamic focus(using JavaScript) is not working in iPad iOS 13+?

Dynamic focus using JavaScript is not working properly in iPad iOS 13+(Safari). Click events are also not triggering properly. Are there any major changes in executing JavaScript methods like element focus in the latest iOS for iPad. This is just happening in iPad only and not in iPhone.
Scenario: I need to set focus on an input-box when selecting an item from the auto-populated list. Also, I'm checking this with voice-over in on state. So, I want it to read the value inside the input-box. The same feature is working fine in iPad iOS 12, but showing some weird behavior in iOS 13. Could anyone suggest me a workaround.

Bootstrap select dropdown does not open menu on Windows machines - IE, Chrome and Firefox

Building atop Silvio Moreto's Bootstrap Select I have a custom dropdown with no issues in Chrome, Firefox and Safari on Mac, iOS and Android (private browsing or not).
Windows
In Windows the select renders how visually expected -- everything looks to be in place -- but clicking the select does not open the dropdown menu (which is kind of the point).
I'm really stumped and surprised that the operating system could have such an impact on this component. I also have little experience working with Windows machines and hope someone may be able to give some clues about what could be happening.
Live example
View the problem in real time here
Has anyone experienced a similar problem? How could this happen?

html Select not working in mobile browsers but working well on desktop chrome

Its feeling as if the select options are not getting clicked at all or are responding very slowly.All the other things in my app are working normal.
when I click on the select input boxes it works fine on my computer but not well on my cell phone.I tried using several other android phones but it did not help me.
I have used angular js routs to create new pages.
Here is my website link http://gananatraj.com/gdanceapp/www/#/home
Login as trainer#trainer.com
password as password
I first noticed this issue after updating google chrome mobile browser to the latest version .that is version 53.x.x.x. But now noticed issue on mobile mozilla browser as well.
Other website`s select options work fine.Do not know the exact cause for the issue.
its like a mobile app.. The select is not working on chrome and Mozilla mobile browsers.I cannot figure out what is wrong...Can anyone help me trouble-shoot this issue??
Your help is really appreciated.

html5 drag and drop upload broken in chrome

I have been working on this bug for a while now , for some reason the drag and drop uploading I implemented on my site has not been working in chrome. No error messages or anything. Just when you try to drag a file over the designated area you get the mouse icon of the circle with the line through it. So after testing and testing and testing I came to realize that even if I go to the html5 Official demo page for the drag and drop it does not work there either in Google Chrome.
Has anyone ran into this? is there some type of security setting that got triggered in my Chrome browser that is preventing the drag-n-drop ?? I am concerned now that there may be other user that may run into this. Currently I check if the user's browser if HTML5 compatable and then only offer the drag-n-drop option, if not I fall back to the choose a file button. But now I'm learning that there may be a third case - which is mine now . I have the newest version of Chrome , but it just for some reason started blocking drag-n-drop a few days ago. It used to work just fine.
EDIT
the HTML5 drag-n-drop demo site
and I'm using Chrome Version 39.0.2171.65 m
I found strangely enough (on version 57.0.2987.110) that closing all instances of chrome, opening task manager and making sure it is fully closed, then restarting it seemed to get the dropping working again.
I'm not sure of a fix when this is occurring but I did see a bug report about this at https://productforums.google.com/forum/#!topic/gmail/RgPdExhVPMs but it looks to me like a browser update (as this was originally posted in 2015 and likely isn't a problem anymore) would fix it right up.

Categories

Resources