Develop Reference

Open bootstrap dropdown on input focus

I have an input that when clicked shows a bootstrap 4 dropdown BUT I need it to open when a user tabs to it as well for ADA accessibility.
If I use a focus event that uses $('#input-name).dropdown('toggle') it works fine, but when the input is clicked focus fires first which opens the dropdown and then the click event closes it.
I have tried e.preventDefault(); e.stopPropagation(); but neither help solve this issue.
events: {
focus #healthPlanMenu": "openDropDown"
}
openDropDown: function (e) {
if ($('#healthPlanMenu').find('.dropdown-menu:no(.show)')){
$("#healthPlanMenu.dropdown-toggle").dropdown('toggle');
}//fails
$("#healthPlanMenu.dropdown-toggle").dropdown('toggle');//fails
$( "#healthPlanMenu" ).click();//fails
}

So ideally you'd probably solve this by having the focus event set the dropdown's state to open, that way if it gets "reopened" by the click event, no problem. However, as far as I can tell there is only a toggle option with the jQuery API; seems unnecessarily limiting...
Given that, we can know if a click is coming after our focus event by using mousedown. So a somewhat hacky way to solve this problem is to disable our focus event if we know a click is coming.
(function() {
var disable = false;
$('#healthPlanMenu.dropdown-toggle')
.on('mousedown touchstart', function() {
disable = true;
})
.on('focus', function() {
if (!disable) {
$(this).dropdown('toggle');
}
})
.on('mouseup touchend',function() {
disable = false;
})
})()
I don't know if the touchstart and touchend are necessary as most browsers probably fire mouse events on touch as well. But better safe than sorry.

JQuery is not triggering atbar button

I am working on a large project and need to fix some accessibility issues.
These is a section which has been generated by https://www.atbar.org/ in a JS format I am not familiar with. The user clicks buttons to change font size, background colour and other html elements to assist them with reading content.
When you click on the buttons with your mouse they work fine. This is an example of how the buttons appear:
<li class=“access-button">
<a title="Decrease Text Size" id="block_accessibility_dec" tabindex=“0">A-</a>
</li>
If I focus my Chrome inspector on the link element I can see there is an event listening for my click:
This appears to trigger the change in font size. I found the code that triggers this click, it is in a JS format that I am not familiar with:
M.block_accessibility = {
init: function(Y, autoload_atbar, instance_id) {
this.defaultsize = M.block_accessibility.DEFAULT_FONTSIZE;
// This event triggers after clicking
Y.all('#block_accessibility_textresize a').on('click', function(e) {
if (!e.target.hasClass('disabled')) {
M.block_accessibility.changesize(e.target);
}
});
// This is the function it runs, it has many cases for all the different buttons.
changesize: function(button) {
Y = this.Y;
switch (button.get('id')) {
case "block_accessibility_dec":
Obviously this is just snippets of the code with comments I added.
What I require is the user to be able to change the font size using just tab and enter, so I added the following JQuery:
$("#block_accessibility_dec").keyup(function(event) {
if (event.keyCode === 13) {
$('#block_accessibility_textresize #block_accessibility_dec').click();
}
});
This is not triggering the change in font size. Yet when I click on the button it does? There is probably a really simple solution here but I've been stuck for ages. I tested the .click() on other elements on the screen and it works for them so the JS is definitely executing.
I have also tested:
$(this).click();
But to no avail.

Try to trigger the click event by the native way:
$('#block_accessibility_textresize #block_accessibility_dec')[0].click();
Source: I tried their demo page together with the chrome inspector and couldn't get the click working with JQuery.
But with the native click event it suddenly worked.
Unfortunately I can't really explain to you, why JQuery doesn't work here. Maybe something with their version (1.11)?

Replace your code with the following code and add the keyup event. This should work when you press the enter key.
Y.all('#block_accessibility_textresize a').on('click keyup', function(e) {
if (e.keyCode == 13 || e.keyCode ==9) {
if (!e.target.hasClass('disabled')) {
M.block_accessibility.changesize(e.target);
}
}
});

You should use the following Jquery:
$('#block_accessibility_textresize #block_accessibility_dec').trigger("click");
Please let me know if this doesn't work.

X-editable toggle on click. How to disable native element click?

Problem is that cant disable native "on click" event that triggers x-editable to transform into textarea. I want that only Button could tranfsorm text to textarea, So that on text is non-clickable.
I found questions how to trigger x-editable on other element click.
But how to disable native text click and leave only other element's event ?
Fiddle with problem is here:
This part works great:
$('.edit-post-button').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$textarea = $(this).closest('.media-body').find('.editable');
$textarea.editable('toggle');
});
But when trying to disable native text click, it wont work, or I'm doing something wrong here ?
$('.editable-post-textarea').on('click', function(e) {
console.log('native-click-triggered!');
e.stopPropagation();
});
Here is sample with my problem: http://jsfiddle.net/jjdJX/64/
So how to disable native "click" event on textarea, and leave trigger only on "EDIT TEXT" button?

Disable elements' click event using:
$('.editable-post-textarea').off('click');
Fiddle: http://jsfiddle.net/jjdJX/65/

In version 1.5.1 you can set a 'toggle' option with a 'manual' value
$('.editable').editable({
toggle: 'manual'
});
Doing this has the nice side effect of removing the dashed-underline decoration in the editable field.
source official x-editable docs

onclick fires drag event on toggle enabled div

I have a div that is draggable. The "splitter" that is used for dragging it / toggling it, it's supposed to allow expanding and collapse only on doubleclick. (Or simple drag and expand).
The functionality works fine, but once the div is in the collapsed state, it repositions/opens up to some 10px width, when just 'clicking' on the splitter. I.e, single click/mousedown.
I have tried stopEvent, return false, also all other possibilities of fixing it, but it won't stop from expanding on single click
This is not supposed to happen. Any help would be appreciated.

To solve this problem I think you will need to add some extra state to your DOM node containing a flag if the object moved or not. If it really moved, then the click event should not be fired.
An example of adding the state:
lang.mixin(domNode, {
moved: false
});
Then, when the Move event is fired, you set the flag to true, for example:
moveable.on("Move", function(mv, pos, evt) {
if (evt.target.moved === false) {
console.log("Drag detected");
}
evt.target.moved = true;
});
In the click event handler you will have to verify if the flag is changed to true or not and put it back to false (for the next moves). For example:
on(domNode, "click", function(evt) {
if (evt.target.moved === false) {
// Execute your logic here
}
});
Of course, this isn't the most elegant solution (but it works). The most beautiful solution would be that you extend the Moveable yourself and make it work to your needs.
I tested it out with a JSFiddle, which you can see here.

jquery autocomplete hides itself on window blur, disable this

jquery's autocomplete is hiding itself on window blur, how to prevent this?
Can't find the answer on the Internet.
Sounds simple but with the following code to determine window focus and blur I get display none for all autocomplete that were opened right before going into blur, seems window blur is the trigger for autocomplete to hide:
$(function() {
$(window).focus(function() {
});
$(window).blur(function() {
$(".ui-autocomplete").each(function(){alert($(this).css("display"));});
});
});
I wanted to set variables for all autocomplete that had a display other than none and then on focus display these, but on blur I get display none for all ".ui-autocomplete"

Try changing the autocomplete's blur event handler like this:
$(function(){
$('#autocomplete').autocomplete({
source: ['cat','rabbit','donkey']
}).off('blur').on('blur', function() {
if(document.hasFocus()) {
$('ul.ui-autocomplete').hide();
}
});
});
Using the hasFocus() function you can check the focus of the current window and determine wether to close the options or not
jsFiddle here