We Keep Coding

Remove focus on Boostrap 5 toggle button after click

I am trying to work with the Bootstrap 5 Toggle Button (using the Outline Style for a more evident visual emphasis). However, the UX experience is not quite what I'm hoping for.
(See https://getbootstrap.com/docs/5.0/forms/checks-radios/#outlined-styles)
The toggle per se works well, its the focus (or after the click focus I should say) that's the problem. When the button is in an unchecked state, the visual clue is prominent since the button is outlined. When the button is in an checked state, again the visual clue is prominent because the button is filled. When the button transitions from an unchecked to checked state, the change is evident as it transitions from outlined to filled.
The problem is when unchecking. When the button transitions from a checked to unchecked state, the button remains filled until a) the mouse is moved on device with a cursor, or b) another location on the page is touched on a touch device. The user obviously believes that they have not unchecked the button when it has in fact been unchecked and then proceeds to continue to attempt to uncheck the button.
The problem is even more evident when dealing with multiple checkboxes in a button group.
(See https://getbootstrap.com/docs/5.0/components/button-group/#checkbox-and-radio-button-groups)
I have tried using javascript to call blur on the checkbox's click event, and although that approach has a limited degree of success, it does nothing on touch devices as the virtual pointer for the device remains hovering over the button. I also tried calling focus on a different element on the page with the same result.
Does anyone have any suggestions?

Was submitted for bugfix here: https://github.com/twbs/bootstrap/issues/34664

Using jquery to capture click event on <li> element not working on iPad

On this page:
http://www.jwallacellc.com/fabric.htm
If you click any of the numbered blocks on a computer, a pop-up appears.
If you click them on an iPad, the hover state appears, then clicking a second time makes the pop-up appear.
I want the pop-up to appear on the first click on iPad.
Curiously, almost the exact same thing happens on this website's home page, but in that case the first click opens the pop-up without a problem:
http://www.jwallacellc.com
I don't understand why they are reacting differently. In both cases, the hover state is handled by CSS:
ul#home li:hover h2{height:160px;}
ul.interior li:hover h2{display:block;}
The clicks are handled by jQuery/Javascript:
$('#home li').click(function(){…});
$('ul.interior li').click(function(){…});
Is there some difference in my selectors that is causing iPad to not capture the click event the first time, on my interior page, but not the home page? Does iPad think because there is a hover state, it should show that the first time? But why would Javascript ignore the click event in that case? And in any event, my two pages are functioning differently for some reason.
Would appreciate any advice. Thank you!

iOS require an href="#" parameter on links

In my experience, this is just one of the differences between desktop and iPad web development. The iPad is listening for touch events, but can still handle click events (somewhat). The first touch is always a hover and the second a click, when you're listening for clicks.
You can get around this by listening for touch events using something like Zepto.js instead of jQuery, or a jQuery plugin for touch events, instead of listening to click events.
Or if you like, you can manually setup touch events with a tutorial like this.
I'm not sure why one of the pages actually works on the first touch, I've never been able to accomplish that with a click handler.

JavaScript: Swipe for Action Pattern Implementation

I have implemented the Swipe for Action Android pattern in my mobile web application (PhoneGap) using JavaScript & CSS animations/transitions.
However, there's one thing that's still eluding me.
I wish, that once the action menu is displayed fully and the user clicks anywhere outside of the action menu (labelled 3 in the figure), the menu should retract and the original item displayed (labelled 1 in the figure).
In a desktop application, one could "capture focus" and perform the transition back to (1) in lostfocus.
What is the JS equivalent of lostfocus event. I see an onfocus and onblur event, but from what I read it's really meant for things that need focus; like input, textarea, etc.
How else could I catch that event I'm interested in, other than putting some code in the touchend of every other element in the page and forcing the retraction of open actions explicitly?

I think you gave the answer yourself. focus and blur are the events to be used for this and they are not exclusively meant for input elements, as you can see here [1].
I'm even trigger the focus event manually in a layer use case: A layer opens and I want to capture the keypress of ESC to close the layer. For this I need to set the focus on the layer as my event handler would not fire otherwise.
To capture the click outside you just need to register for pointerUp or click events on an element that spans the whole screen (it must really cover the whole screen like the body element). Because of the event bubbling the handler will fire as long as nothing else captured and cancelled it.
[1] https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3-Events.html#event-type-blur

itemtap event not firing on all taps

I'm using Sencha Touch 2.1. I have Ext.carousel.Carousel container and bunch of Ext.dataview.Dataview as pages inside carousel.
On each dataview I have a lot of buttons (rendered using CSS - so they are not buttons controls but simple divs with fancy styles). I'm trying to catch itemtap event when user taps on the "button".
Everything works fine in browser on the desktop. On the iPad however touch sensitivity is different and often I will not get itemtap event when user not carefully and somewhat slowly taps on the button. Carousel would start moving slightly as in swipe event was detected and carousel needs to change pages.
I tried to replace itemtap and use itemtouchstart instead. Button responsiveness got significantly better, but I often see false positives when user legitimately swipes between pages.
I'm stuck. I want to have responsive buttons and also swipe across to change pages.
Anybody seen something similar? Or solve it somehow?

This is a known issue check out this forum post in sencha forum. Tragically i have the same issue & at the moment it cannot be solved using sencha alone perhaps a solution is available in phonegap but i dont know.

Disabling Select element options popup in Firefox

I'm trying to implement a "custom" combobox options popup, so that near each option on the list i can place an icon / image.
My goal is to make this as unobtrusive as possible and make it look as close to a regular combo as possible, so, for Chrome and IE, the solution of grabbing the mouse and keyboard events that cause the standard popup to appear works fine:
#el.bind 'mousedown keydown keyup click', (e) =>
(...)
e.stopPropagation()
e.preventDefault()
This basically makes it so that the control is still there, looking native, and whenever the user clicks or focuses it, it shows up the "custom" list instead of the native one.
However, in firefox, as soon as the user clicks the combobox control (< select >), a popupshowing event is triggered, but i can't find a way to cancel it before the popup with the < options > shows up, covering up my "custom" options display implementation.
The only information regarding this event i was able to find, was on the Mozilla XUL documentation.
Thanks in advance.

I looked at the source code and it doesn't appear to be possible to cancel either the mouse event that opens the drop down or the popupshowing event (I don't even know why that event is generated). However I think you might be able to capture the mouse event on a parent element and stop its propagation.