Develop Reference

Removing an Onclick Event From a Menu Link

I am using a AJAX search plugin for Wordpress that displays in my mobile menu by targeting a specific menu ID (menu-item-6101). Everything works great, but when I click on it the menu is dismissed (which prevents you from doing any searches, the expected behaviour is for the menu to stay visible while typing).
I have spent a number of hours researching, and it seems that there is an onclick event attached to the <a> of that menu item that is likely causing the menu to be dismissed (note that none of the other parent -> child toggles cause this, only this menu item that the search plugin is using to display a search box).
I have tried every single variation of event.preventDefault();, event.stopImmediatePropagation(); & event.stopPropagation();, as well as trying to remove the listener, send it to null, etc. but unfortunately I am having issues with either the targeting (e.g. fetching the ID, and then targeting the <a>, or it is being overridden due to the javascript load order.
I have also tried to make an onclick event for that menu item div that forces the mobile menu to stay visible (the menu gets style="display:none;" added to when when focus is changed), so I thought perhaps that would be a different approach:
jQuery('div.proinput').click(function(){
var element = document.getElementById('#mobile_menu');
element.style.removeProperty("display");
jQuery('.et_mobile_menu').css({
display: inline-block !important;
});
});
I would really appreciate it if someone could help me.
Thanks!

I think the menu toggle is actually being fired by the div#ajaxsearchpro3_2 inside de anchor. Try with this (assuming the div will allways have the same ID):
FIXED
document.getElementById('ajaxsearchpro3_2')
.addEventListener('click', function(e) {
e.stopPropagation();
});

The final solution is:
jQuery(".et_mobile_menu .menu-item a").not(".toggle-menu").off("click");
Hope that this helps someone :)

HTML5 Color Input Won't Open

I'm working on a web application that involves using canvases as a shared whiteboard between people. I have an HTML5 color input on a menu that becomes visible when hovering over the whiteboard so that the user can change the color of the drawing tool.
My issue is that during testing, the color picker won't open the majority of the time. I have two tabs open both with instances of the whiteboard to test. The color picker will only open on the first instance of the page I have open.
On the second page, when I click on the color picker it refuses to open. It shows the click animation on the button but the browser's color picker dialog doesn't open. Also, if I refresh the first instance of the page, the color picker stops working there as well. The only way I can get it to work again is if I completely close both tabs and reopen one.
I've tried and confirmed that this happens in both Chrome and Firefox which makes me think it's an issue with the HTML. This is a snippet of HTML that surrounds the color picker.
<a href="#button-draw" id="drawing-tool" title="Drawing Tool" data-toggle="remote-whiteboard" data-toggle-2="min" style="display:none;">
<div class="drawing-tool-menu" style="display:none;">
<input id="color-draw" type="color"/>
</div>
<span class="fa fa-pencil fa-2x"></span>
</a>
The anchor is a button in a hovering toolbar for selecting a marker and when the mouse hovers over that button, the color picker appears above it so you can select the color.
Here is a picture of the menu hovering over the whiteboard with the color selector visible.
I've tried to be detailed here and put down the relevant info. I'm not sure what information may be valuable to help solve the problem. I'm also not sure whether it's a problem with the browser or my code. I can add some of the javascript I use to display the menus, more HTML, or CSS if it would help.
Edit 1:
Javascript Code
I use this code to detect changes in the color
$("#color-draw").off();
$("#color-draw").change(function (e) {
drawingClass.currentColor = $(this).val();
});
In order to show/hide the menus I use this.
var menuCloseTimer = {};
$(".whiteboard-toolbar a").off();
$(".whiteboard-toolbar a").mouseenter(function (e) {
var item = $(this).attr("id")
var key = $(this).attr("data-toggle");
$(".video-toolbar[data-toggle='" + key + "']").show();
$(".whiteboard-toolbar[data-toggle='" + key + "']").show();
$(this).children(".drawing-tool-menu").show();
clearTimeout(menuCloseTimer[item])
});
$(".whiteboard-toolbar a").mouseleave(function (e) {
var menu = $(this)
var item = $(this).attr("id")
var key = $(this).attr("data-toggle");
$(".video-toolbar[data-toggle='" + key + "']").hide();
menuCloseTimer[item] = setTimeout(function () {
menu.children(".drawing-tool-menu").hide();
}, 500);
});
Edit 2:
I discovered something. On the first load when I click on the color picker it opens but on subsequent loads, it triggers the handler for anchor instead. I'm not sure why though.

I wrote the HTML intending to make the popup menu show up relative to the anchor button. But, the input element being inside of the anchor is causing the issue. After the first load, clicking the color input triggers the anchor instead of bringing up the color window.
I don't know why the color picker works on the first load but I'm fairly sure this is what is causing the issue. I did some research and found that you aren't supposed to put buttons inside of anchors and this is basically that.
I moved the color input out of the anchor and it worked perfectly.
It's frustrating that there isn't any documentation about this issue or errors thrown by the browser.
Edit 1
In order to fix the issue I changed my code to:
<div style="display:inline-block;position:relative">
<a href="#button-draw" id="drawing-tool" title="Drawing Tool" data-toggle="remote-whiteboard" data-toggle-2="min">
<span class="fa fa-pencil fa-2x"></span>
</a>
<div class="drawing-tool-menu" id="drawing-tool" data-toggle="remote-whiteboard" style="display:none;">
<input id="color-draw" type="color" />
</div>
</div>
That way the input is separated from the anchor but is still placed relative to it.

How Bootstrap 4 buttons change the state in a mobile view without a reference to CSS class?

I've got a basic example of a few buttons populated in a basic modular popup. I was going to ask how they change the state from active to inactive as in my code I don't see any visible change.
I was adding custom JS to add "active" class on click action and remove on the second click but still at least one button (recently clicked) remained selected even without "active" class attached to it.
I've prepared the code example in Codepen.io https://codepen.io/krzysztof-d/pen/rNLqdMv but I found out that those buttons over there behave even differently as they are not stay selected as they should by default, right?
Please let me know what I am missing
<button type="button" class="btn btn-outline-secondary w-100">1</button>
Update:
So the default behaviour of the buttons is different depending if in Desktop or Mobile view. You can test on Codepen example - in mobile last clicked button remains "selected/dark" (with change colour and focus around it) when in desktop view it instantly change back to white colour after mouse go away.
Now I work on selecting multiple buttons by adding active state - but I don't know how to handle this mobile behaviour as at least one button looks like selected even without "active" class attached to it.
My questions is how to make such button to look normal again (as other not selected) programatically?
In another words it doesn't seem to be a problem to make a multiple selection but I want to allow to deselect some buttons if someone make a mistake and this is where the weird part became. Here is the another link to Codepen with the same example with some JS added to add/remove active class from buttons - check it out in mobile view https://codepen.io/krzysztof-d/pen/OJXBwYm, try to select a few numbers and then deselect one or two.
Update with screenshot on request - button six in mobile view seem like selected but actually it was just deselected and class .active has been removed from it.

First or all, you don't need to write your own JavaScript to toggle the .active class on the buttons. Bootstrap has the button plugin you can use:
<button type="button" class="btn btn-outline-secondary w-100"
data-toggle="button" aria-pressed="false">1</button>
That would automatically toggle .active class when selecting/unselecting the button.
jsfiddle demo: https://jsfiddle.net/davidliang2008/mfqyp8j3/6/
Secondly, when you select a button, there are 2 things going on. Bootstrap addes .active (if you're using the button plugin) and .focus class:
.active: gives you the same background on the button just like when you hover it
.focus: adds shadows around the button
When you click somewhere else, only .focus class would be removed. That's why you should see the button is filled with the background color without the shadows, the same as you hover over it.
When you unselect a button but your mouse is still pointing at it, .active class is removed but the hover effect as well as .focus is still going on, making the button look like you haven't unselected it.
As soon as your mouse moves away, the hover effect is gone, and only .focus is left. That's why you should see the button only has shadows.
If you want to distinguish the select and unselect state of the button a little bit more, you can write CSS to disable hover effect if the button is .focus but not .active:
.selector .btn.focus:not(.active):hover {
color: inherit;
background-color: inherit;
border-color: inherit;
}
jsfiddle demo: https://jsfiddle.net/davidliang2008/mfqyp8j3/17/
Codepen demo: https://codepen.io/davidliang2008/full/yLJRZYy
A gif to show it's working properly in mobile view:

WebDriver Dropdown Menu Won't Stay Open

I'm working with Selenium / Java and having an interesting issue with a DropDown Box that fires an event... I can't use Select because the dropdown is using an organized list, not select and option (when the box is closed):
<section id="..." class="ember-view">
<ol id="...">
<li id="...">
I successfully click on the dropdown box: element.click();
and the dropdown box opens! But then it closes right back up again when the next line executes (which is just a System.out.println("...");).
I'm baffled. I've tried
JavascriptExecutor jse = (JavascriptExecutor)driver
jse.executeScript("$(arguments[0]).change()", element);
and
jse.executeScript("$(arguments[0]).focus()", element);
and even
jse.executeScript("$(arguments[0]).blur()", element);
both before and after I click on the dropdown box, but that little sucker just won't stay open! When I print the value of arguments to the console System.out.println(jse.executeScript("$(arguments[0]));, arguments is null... I'm not sure what that means.

If you're not changing the classes when you click the dropdown then you're going to click it and it's going to just disappear after you click it pretty much. Try making it so the dropdown always shows and add a class that disappears on click called "hide" or "removeDisplay" like so
hide { display:none }
and then put it in the html element.
<htmlElement class="alwaysShowThis hide"></htmlElement>
make sure that on clicking it you remove the hide class, then you can just put a timer on it or just detect for when you are hovered over it.
the javascript might look like this:
display(event) {
if(/*checkfor hide class existing*/){
//remove hide class
}
}
hide() {
if(alwaysShowThis or its id is not being hovered over){
//add hide class to its classes
}
}
I mean these are just some 5 min suggestions, obviously there is a way to write these better but I don't have them off the top of my head, but you can find how to do all of these things quite easily.

I do appreciate everyone for contributing, but I never actually found the reason this was happening. So, I tried a cheat instead...
I put it all in a try / catch block, and that seems to slow it down enough to process the event. Of course, the catch is useless because it will never be reached but it works.
It's a total hack, I know. I'd still be interested in finding a reason for this behavior, but until then, we carry on!

Had similar problem and solved it with moving the cursor to the dropdown.
public void hover(WebElement element) {
Actions builder = new Actions(driver());
builder.moveToElement(element).perform();
}
After that it stayed open and I could click my selection.

Accessibility for dropdown component

I am implementing accessibility for dropdown component, the special feature of my dropdown is it populates values in options menu only while opening dropdown,meaning it on the fly compiles the template and attaches to the dropdown box.
Dropdown HTML:
<div id="dropdown" ng-click="openDropdown()">
<div id="selectedValue" role="listbox" tabindex="0" aria-label="{{selectedVal}}" aria-owns="dropDownMenu">{{selectedVal}}</div>
</div>
DropDown Menu template(which gets compiled and polpulated after clicking dropdown above) :
<div id="dropDownMenu">
<li ng-click="selectItem()" role="option">item1</li>
<li ng-click="selectItem()" role="option">item2</li>
</div>
I am facing two problems
As my #dropdownMenu gets generated on click of #dropdown(dynamic template generation) jaws do not have access to #dropdownMenu when focus comes to #selectedValue so it doesn't announce the number of options etc as in case of a typical selectbox.
I am giving aria-label="{{selectedVal}}" for #selectedValue so on click of arrow keys javascript takes care of updating selectedVal even though #dropdownMenu is not open ,but changed value of selectedVal is not announced by jaws 16.0 ,it only announces it only first time as user tabs into it .Noted that this works fine in jaws 14.0 .
Looking forward for some solutions....

Adding aria-live=polite should fix this.
Is there a reason you're not using a standard select box and populating the option elements with your dynamic content? That would remove the need to update an aria property with the current option, as screenreaders will find it themselves. Also aria-label should be the name of the selectbox (or its purpose) not its selected option. If you were using a HTML select with options you could then remove the tabindex and aria-live as well, since native form inputs have full keyboard and screenreader support by default.

You should probably wait until the element is rendered and appeared in the DOM and only then set the focus to the first submenu item by using a native function .focus(). That will do the job.
But... Make sure that if the request takes too long and the user has already left somewhere else doing something else on the page, that in this case you don't steal his focus to get him back to the dropdown menu otherwise he might be annoyed.
Also instead of tabindex=0 for interactive elements (wherever you use ng-click) I would recommend that you use the actual native elements such as <a> or <button>. That way you ensure that the elements will be focusable both by keyboard but also visually, and react to ALL keyboard keys which the users are used to use and thus expect it to react such as SPACE or ENTER without needing you to implement it manually.