Page MenuHomePhabricator

WikiEditor dropdowns should behave normally, closing when they lose focus or when ESC is pressed
Closed, ResolvedPublic

Description

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.


Version: unspecified
Severity: normal

Attached:

wikieditor-multi-dropdown.png (516×792 px, 30 KB)

Details

Reference
bz32731

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 12:06 AM
bzimport added a project: WikiEditor.
bzimport set Reference to bz32731.
bzimport added a subscriber: Unknown Object (MLST).

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)

Samwilson claimed this task.
Samwilson added a subscriber: Samwilson.

Toolbar 'select'-type dropdowns (e.g. the 'Heading' picklist) only open on hover now (and close on blur), so it looks like this bug is fixed.