I am using MUI v4 Autocomplete for my dropdown.
Ours react app runs as a micro-frontend in two domains, in one of them it does not work correctly,
As I detailed (Current behavior).
So I debug the iPhone and I found that it has an event listener onBlur that blocks selection.
Current behavior 😯
With iPhone (safari and chrome) trying to select an Autocomplete option from the options list, results in the option not being selected,
How do I disable all onBlur events that were affected by Autocomplete?
Related
I'm using gwtmobile for implementing an iOS app, and I would like to use menu dialog like Facebook.app (when you click to show notification), so, I may insert some of menu-like content and handle it.
Are there some libraries that I can use?
On this site : mecanomedic.com, the menu template work fine in "normal" desktop browser, but dont slide down on ipad-iphone device. What can be the problem ?
Some tell me it's a css problem, but HOW safari desktop work ?
The problem is that the menu expansion relies on the user hovering with a mouse. On touch devices like iPads & iPhones, the hovering gesture can't be replicated because there's only one input- touch. If I were you, I'd take a look at Twitter's Bootstrap menu setup and perhaps use media queries to serve up a different menu on smaller screen sizes.
Here's an example of a Bootstrap navigation bar in action (you'll have to inspect the code to see how it works).
Add a href to the top-level <a>'s so that they can be focusable:
Produits
Elements that are focusable receive mouse events and hover styles when the user taps on them.
As #Matt stated, the problem is that your menu relies on a hover event and unfortunately that event is unavailable on touch screen devices.
One way to fix this would be to:
Check if the current user's device is an iOS device
If the device is an iOS device, use javascript to trigger a menu item's "show event" when the menu button is CLICKED instead of ROLLED OVER / HOVERED.
This would result in the menu being shown when the user taps a menu button.
I have an application, that uses the MultiSelectionModel, and it works great, but I need the site I'm developing to work on mobile devices, and so I can't use the keyboard to assist in selecting the elements (since it doesn't exist). EX: On the desktop I just hold ctrl and click on all the element that I want to select.
So on the mobile device, I would like to modify the default behavior of the MultiSelectionModel so that when you click on a CellList item, it toggles the selection state of that item.
I have looked through the source for it and cannot see anyway to implement the behavior that I need. (Mobile MultiSelection).
Whether you add a checkbox column or not, you'll have to add a cell preview handler. The easiest way to define one is to use DefaultSelectionEventManager, either using a checkbox manager in combination with a checkbox column, or creating a custom one (you'd map a click event into a toggle action).
You can see it used, the checkbox variant, in the GWT Showcase; it uses the setSelectionModel overload with two arguments to add the CellPreviewEvent.Handler at the same time.
Just adding an extra checkbox column would be a more user friendly solution.
I'm experimenting with ways to have tooltips work across a variety of mobile devices. Unfortunately, the span of devices I need to support ranges from Nokias to iPhones.
Unfortunately, some of the browsers I'm dealing with don't support the use of the title attribute for tooltips on focus. As such, I need to come up with a different solution.
For starters, I'm playing with pure-css tooltips: http://psacake.com/web/jl.asp
This method uses the :hover pseudo class to position and set the z-index of a SPAN to create the tooltip.
On an iPhone, this produced an odd side effect. Tapping the link once exposes the tooltip require a second tap to actually activate the link.
However, applying a simple style to a different link's :hover pseudo-class (changing the background color) does not have the same effect. One tap triggers both the style and the link (you see the :hover style briefly before the next page loads).
I've solved this issue for mobile devices by switching to using the :focus pseudo-class which appears to not be triggered by the iPhone (and the Nokia touch device I am using). Of course, that's not ideal if this app were to be used on a desktop browser as well.
So...the question: Is there documented logic as to when the iPhone Safari browser decides to interrupt a click event on a link to expose the :hover pseudo-class vs. not interrupting and letting the link be triggered on the first tap?
I was trying to find you a link in Apple's documentation, but the most specific I could find about :hover was that it is emulated and can cause unexpected results. I did find one place that said it is only shown if the user taps and holds the object. That page (near the bottom, "Don't Use Unsupported iOS Technologies") also says that normal tooltips (using the title attribute) would be shown when that happens also.
If you will accept an assumption as to why the behavior is different for changing the style and displaying a tooltip, I would guess that it is similar to the way mousemove events are handled. This Handling Events page says that, if the contents of the page change during a mousemove event, the rest of the events in the chain (including mouseup) are not sent. I am assuming that this behavior also applies to :hover. If you are using display: none to hide the tooltip, you could try using visibility: hidden instead as it is interpretted as "the object is still here, but you can't see it."
Here is my setup:
I have a button and a textbox
The textbox has an "onFocus" Handler which triggers the "selectAll" method
the button has an "onClick" Handler which does the following:
show textbox
textbox.focus(true) and
textbox.selectAll();
But it does not (on mobile devices).
The thing is: this works in FF and Safari - but it does not on mobile WebKit. When I click the button the field gets focused and selected for a milisecond (sometimes not even that) and then returns to focus the button …
A already tried to insert a Timer which then would do the focus - does not work either.
I also tried to capture all events and prevent them - because there is an onFocus event being fired by the button after onClick. I even tried setting the focus to the textbox from the onFocus event of the button. No chance.
Any other Ideas?
The problem is that GWT doesn't compile Javascript code for touch devices. You will need to create your own implementation.
Take a look to this article: Supporting multi-touch events