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

Assigned To

Authored By

	maiden_taiwan
	Nov 30 2011, 7:37 PM

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).

maiden_taiwan created this task.Nov 30 2011, 7:37 PM

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)

MarkTraceur unsubscribed.Jan 27 2017, 10:16 PM

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.

happy5214 moved this task from Backlog to Closed on the WikiEditor board.Jul 17 2021, 5:22 AM

WikiEditor dropdowns should behave normally, closing when they lose focus or when ESC is pressedClosed, ResolvedPublicActions

Description

Details

Event Timeline

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