@@ -35,7 +35,7 @@ $.widget( "ui.selectmenu", {
35
35
} ,
36
36
37
37
_create : function ( ) {
38
- // set a default id value, generate a new random one if not set by developer
38
+ // get / make unique id
39
39
var selectmenuId = this . element . attr ( 'id' ) || 'ui-selectmenu-' + Math . random ( ) . toString ( 16 ) . slice ( 2 , 10 ) ;
40
40
41
41
// array of button and menu id's
@@ -56,6 +56,15 @@ $.widget( "ui.selectmenu", {
56
56
57
57
this . _drawMenu ( ) ;
58
58
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
+
59
68
if ( this . options . disabled ) {
60
69
this . disable ( ) ;
61
70
}
@@ -156,15 +165,6 @@ $.widget( "ui.selectmenu", {
156
165
157
166
// unbind Menu document event
158
167
$ ( 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
- } ) ;
168
168
} ,
169
169
170
170
refresh : function ( ) {
@@ -193,36 +193,30 @@ $.widget( "ui.selectmenu", {
193
193
194
194
open : function ( event ) {
195
195
if ( ! this . options . disabled ) {
196
-
197
196
this . _toggleButtonStyle ( ) ;
198
197
199
198
// make sure menu is refreshed on first init (needed at least for IE9)
200
199
if ( this . isOpen === undefined ) {
201
200
this . button . trigger ( "focus" ) ;
202
201
}
203
202
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 ( ) ;
218
204
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" ) ;
225
212
}
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
+ } ) ;
226
220
}
227
221
228
222
this . menuWrap
@@ -239,11 +233,7 @@ $.widget( "ui.selectmenu", {
239
233
close : function ( event ) {
240
234
if ( this . isOpen ) {
241
235
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 ( ) ;
247
237
this . isOpen = false ;
248
238
this . _trigger ( "close" , event ) ;
249
239
}
@@ -263,17 +253,10 @@ $.widget( "ui.selectmenu", {
263
253
264
254
$ . each ( items , function ( index , item ) {
265
255
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 ) ;
277
260
currentOptgroup = item . optgroup ;
278
261
}
279
262
that . _renderItem ( ul , item ) ;
@@ -422,6 +405,12 @@ $.widget( "ui.selectmenu", {
422
405
}
423
406
} ,
424
407
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
+
425
414
_toggleButtonStyle : function ( ) {
426
415
if ( this . options . dropdown ) {
427
416
this . button . toggleClass ( 'ui-corner-top' , ! this . isOpen ) . toggleClass ( 'ui-corner-all' , this . isOpen ) ;
0 commit comments