fix some Select/MenuButton bugs

source/Ox.UI/js/Form/Ox.Select.js

@@ -17,6 +17,7 @@ Ox.Select <f:Ox.Element> Select Object
         maxWidth <n|0> Maximum menu width
         min <n|1> Minimum number of selected items
         overlap <s|'none'> Can be 'none', 'left' or 'right'
+        selectable <b|true> is selectable
         size <s|'medium'> Size, can be small, medium, large
         style <s|'rounded'> Style ('rounded' or 'square')
         title <s|''> Select title
@@ -47,6 +48,7 @@ Ox.Select = function(options, self) {
                 maxWidth: 0,
                 min: 1,
                 overlap: 'none', // can be none, left or right
+                selectable: true,
                 size: 'medium',
                 style: 'rounded',
                 title: '',
@@ -69,13 +71,14 @@ Ox.Select = function(options, self) {
                 width: self.options.width - 2 + 'px'
             })
             .bindEvent({
-                click: showMenu,
+                anyclick: showMenu,
                 key_escape: loseFocus,
                 key_down: showMenu
             });
 
     Ox.Log('Form', 'Ox.Select', self.options);
 
+    if (self.options.selectable) {
         self.optionGroup = new Ox.OptionGroup(
             self.options.items,
             self.options.min,
@@ -83,6 +86,7 @@ Ox.Select = function(options, self) {
         );
         self.options.items = self.optionGroup.init();
         self.checked = self.optionGroup.checked();
+    }
 
     if (self.options.label) {
         self.$label = Ox.Label({
@@ -123,12 +127,12 @@ Ox.Select = function(options, self) {
     self.$menu = Ox.Menu({
             element: self.$title || self.$button,
             id: self.options.id + 'Menu',
-            items: [{
+            items: [self.options.selectable ? {
                 group: self.options.id + 'Group',
                 items: self.options.items,
                 max: self.options.max,
                 min: self.options.min
-            }],
+            } : self.options.items],
             maxWidth: self.options.maxWidth,
             side: 'bottom', // FIXME: should be edge
             size: self.options.size
@@ -147,6 +151,7 @@ Ox.Select = function(options, self) {
 
     function changeMenu(data) {
         //Ox.Log('Form', 'clickMenu: ', self.options.id, data)
+        if (self.options.selectable) {
             self.checked = self.optionGroup.checked();
             self.options.value = data.checked.length ? data.checked[0].id : '';
             self.$title && self.$title.html(
@@ -156,6 +161,9 @@ Ox.Select = function(options, self) {
                 selected: data.checked,
                 value: self.options.value
             });
+        } else {
+            that.triggerEvent('click', data);
+        }
     }
 
     function getTitleWidth() {
@@ -224,12 +232,12 @@ Ox.Select = function(options, self) {
         () -> <o> returns object of selected items with id, title
     @*/
     that.selected = function() {
-        return self.optionGroup.checked().map(function(v) {
+        return self.options.selectable ? self.optionGroup.checked().map(function(v) {
             return {
                 id: self.options.items[v].id,
                 title: self.options.items[v].title
             };
-        });
+        }) : [];
     };
 
     /*@

source/Ox.UI/js/Menu/Ox.MenuButton.js

@@ -39,13 +39,13 @@ Ox.MenuButton = function(options, self) {
         })
         .options(options || {})
         .addClass(
-            'OxMenuButton Ox' + Ox.toTitleCase(self.options.style)
+            'OxSelect Ox' + Ox.toTitleCase(self.options.style)
         )
         .css(self.options.width == 'auto' ? {} : {
             width: self.options.width - 2 + 'px'
         })
         .bindEvent({
-            click: showMenu
+            anyclick: showMenu
         });
 
     if (self.options.type == 'text') {