Skip to content

Commit a4eeddd

Browse files
committed
Selectmenu: improve optgroup header event handling, fixed disabled item event handling, improve attribute handling on menu toggle, small improvements, clean-up
1 parent c0f9dd3 commit a4eeddd

File tree

1 file changed

+36
-47
lines changed

1 file changed

+36
-47
lines changed

ui/jquery.ui.selectmenu.js

Lines changed: 36 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ $.widget( "ui.selectmenu", {
3535
},
3636

3737
_create: function() {
38-
// set a default id value, generate a new random one if not set by developer
38+
// get / make unique id
3939
var selectmenuId = this.element.attr( 'id' ) || 'ui-selectmenu-' + Math.random().toString( 16 ).slice( 2, 10 );
4040

4141
// array of button and menu id's
@@ -56,6 +56,15 @@ $.widget( "ui.selectmenu", {
5656

5757
this._drawMenu();
5858

59+
// document click closes menu
60+
this._bind( document, {
61+
click: function( event ) {
62+
if ( this.isOpen && !$( event.target ).closest( "li.ui-state-disabled, li.ui-selectmenu-optgroup, #" + this.ids.button, this.buttonWrap ).length ) {
63+
this.close( event );
64+
}
65+
}
66+
});
67+
5968
if ( this.options.disabled ) {
6069
this.disable();
6170
}
@@ -156,15 +165,6 @@ $.widget( "ui.selectmenu", {
156165

157166
// unbind Menu document event
158167
$( document ).unbind( "click.menu" );
159-
160-
// document click closes menu
161-
this._bind( document, {
162-
click: function( event ) {
163-
if ( this.isOpen && !$( event.target ).closest( "#" + this.ids.button).length ) {
164-
this.close( event );
165-
}
166-
}
167-
});
168168
},
169169

170170
refresh: function() {
@@ -193,36 +193,30 @@ $.widget( "ui.selectmenu", {
193193

194194
open: function( event ) {
195195
if ( !this.options.disabled ) {
196-
197196
this._toggleButtonStyle();
198197

199198
// make sure menu is refreshed on first init (needed at least for IE9)
200199
if ( this.isOpen === undefined ) {
201200
this.button.trigger( "focus" );
202201
}
203202

204-
this.menuWrap.addClass( 'ui-selectmenu-open' );
205-
this.menu.attr("aria-hidden", false);
206-
this.button.attr("aria-expanded", true);
207-
208-
// check if menu has items
209-
if ( this.items ) {
210-
if ( !this.options.dropdown ) {
211-
var currentItem = this._getSelectedItem();
212-
// center current item
213-
if ( this.menu.outerHeight() < this.menu.prop( "scrollHeight" ) ) {
214-
this.menuWrap.css( "left" , -10000 );
215-
this.menu.scrollTop( this.menu.scrollTop() + currentItem.position().top - this.menu.outerHeight()/2 + currentItem.outerHeight()/2 );
216-
this.menuWrap.css( "left" , "auto" );
217-
}
203+
this._toggleAttr();
218204

219-
$.extend( this.options.position, {
220-
my: "left top",
221-
at: "left top",
222-
// calculate offset
223-
offset: "0 " + ( this.menu.offset().top - currentItem.offset().top + ( this.button.outerHeight() - currentItem.outerHeight() ) / 2 )
224-
});
205+
if ( this.items && !this.options.dropdown ) {
206+
var currentItem = this._getSelectedItem();
207+
// center current item
208+
if ( this.menu.outerHeight() < this.menu.prop( "scrollHeight" ) ) {
209+
this.menuWrap.css( "left" , -10000 );
210+
this.menu.scrollTop( this.menu.scrollTop() + currentItem.position().top - this.menu.outerHeight()/2 + currentItem.outerHeight()/2 );
211+
this.menuWrap.css( "left" , "auto" );
225212
}
213+
214+
$.extend( this.options.position, {
215+
my: "left top",
216+
at: "left top",
217+
// calculate offset
218+
offset: "0 " + ( this.menu.offset().top - currentItem.offset().top + ( this.button.outerHeight() - currentItem.outerHeight() ) / 2 )
219+
});
226220
}
227221

228222
this.menuWrap
@@ -239,11 +233,7 @@ $.widget( "ui.selectmenu", {
239233
close: function( event ) {
240234
if ( this.isOpen ) {
241235
this._toggleButtonStyle();
242-
243-
this.menuWrap.removeClass( 'ui-selectmenu-open' );
244-
this.menu.attr( "aria-hidden", true );
245-
this.button.attr( "aria-expanded", false );
246-
236+
this._toggleAttr();
247237
this.isOpen = false;
248238
this._trigger( "close", event );
249239
}
@@ -263,17 +253,10 @@ $.widget( "ui.selectmenu", {
263253

264254
$.each( items, function( index, item ) {
265255
if ( item.optgroup != currentOptgroup ) {
266-
var optgroup = $( '<li />', {
267-
'class': 'ui-selectmenu-optgroup',
268-
html: item.optgroup,
269-
// prevents clicks on this header to close the menu
270-
// TODO try to improve this, check how autocomplete handles it
271-
click: function( event ){
272-
event.stopPropagation();
273-
}
274-
});
275-
if ( item.element.parent( "optgroup" ).attr( "disabled" ) ) optgroup.addClass( 'ui-state-disabled' );
276-
ul.append( optgroup );
256+
$( '<li />', {
257+
'class': 'ui-selectmenu-optgroup' + ( item.element.parent( "optgroup" ).attr( "disabled" ) ? ' ui-state-disabled' : '' ),
258+
html: item.optgroup
259+
}).appendTo( ul );
277260
currentOptgroup = item.optgroup;
278261
}
279262
that._renderItem( ul, item );
@@ -422,6 +405,12 @@ $.widget( "ui.selectmenu", {
422405
}
423406
},
424407

408+
_toggleAttr: function(){
409+
this.menuWrap.toggleClass( 'ui-selectmenu-open', !this.isOpen );
410+
this.menu.attr("aria-hidden", this.isOpen);
411+
this.button.attr("aria-expanded", !this.isOpen);
412+
},
413+
425414
_toggleButtonStyle: function() {
426415
if ( this.options.dropdown ) {
427416
this.button.toggleClass( 'ui-corner-top', !this.isOpen ).toggleClass( 'ui-corner-all', this.isOpen );

0 commit comments

Comments
 (0)