Last modified: 2013-05-07 18:44:54 UTC
Created attachment 9582 [details] Screenshot of WikiEditor with multiple dropdowns open at once Dropdowns in WikiEditor open when clicked, but when the user clicks elsewhere on the page, the dropdowns do not close. This is contrary to the behavior of dropdowns everywhere else on the web. (On my own wiki, six users have filed bug reports -- with me -- thinking that the dropdowns are broken because they "don't close.") This behavior leads to a strange experience where multiple dropdowns can be open at the same time. See screenshot showing our customized toolbar. I asked Roan Kattouw about this, and he said this behavior is "not intentional. It's just that the dropdown is built with JavaScript (this is necessary to add styling to the options), and that means that the closes-when-user-clicks-somewhere-else behavior has to be implemented by the developer. We didn't implement this, but it wouldn't be too hard to do." Ideally, the ESCAPE (ESC) key should also cause the selected dropdown to close, since that is also standard for web dropdowns. So please make the dropdowns close as above. Optionally, provide a user Preference that selects this behavior vs. the original behavior. Thank you.
The problem lines are in jquery.wikiEditor.toolbar.js: $select.append( $( '<a/>' ) .addClass( 'label' ) .text( label ) .data( 'options', $options ) .attr( 'href', '#' ) .mousedown( function( e ) { // No dragging! e.preventDefault(); return false; } ) .click( function( e ) { $(this).data( 'options' ).animate( { 'opacity': 'toggle' }, 'fast' ); e.preventDefault(); return false; } ) ); A JavaScript developer friend recommends adding a second click handler immediately after the first, but on the document object, that closes the dropdown. He submitted this code, which doesn't quite work (the events are bubbling up when they shouldn't) but maybe will be helpful to you: .click(function(e) { var $menu = $(this).data('options'); $menu.animate({'opacity': 'toggle'}, 'fast'); // Assign a click handler to the document to close var documentOnClick = function(e) { if (!$(e.target).parents().is($menu)) { $menu.animate({'opacity': 'toggle'}, 'fast'); } // Self-destruct: remove this handler $(document).unbind('click', documentOnClick); }; $(document).bind('click', documentOnClick); e.preventDefault(); return false; }) Hope this helps.
*** Bug 37393 has been marked as a duplicate of this bug. ***
+1. This is a significant UI bug. Realistically, the dropdowns should just be <select> elements, not only removing the need for a fix in this case (because it would act like it's supposed to), but also increasing accessibility and consistency. See, e.g., my work with the ep_wikitext plugin: http://etherpad.wmflabs.org/pad/p/vBU2I6uMSf (the dropdown that says "headlines" is an actual <select>, this is how it *should* work)
