fnagel/jquery-ui

A fork of jQuery UI: WIP branches, legacy Selectmenu Widget (branch: selectmenu) and an accessible version of jQuery UI Tabs (outdated, branch: tabs accessability)

jquery-ui's Issues

Disabled options

Not an issue, but a feature I needed.

I needed to add a feature so that a number of the options in the list could be disabled. So these disabled items would still show up, but not be selectable.

I made the following changes in my local copy.

I added the code block

if ($(event.currentTarget).children().attr('disabled')) {
                            return false;
                        }

at line 159 after if(self._safemouseup)

and again at line 311 at the beginning of the change event.

Loop wont work in IE with noConflict mode

//write li's
for (var i = 0; i < selectOptionData; i++){

Change loop to native for (i = 0; i < x; i++) style loop, like this:

for (var i = 0; i < selectOptionData.length; i++){

calculate a default auto height

When the dropdown doesn't fit into the available space below or above, a scroll solution is needed. Without such a solution, the selectmenu can only be used in select circumstances and cannot be a general replacement for select elements.

select menu flickers on FF

On a long dropdown (200 options) scrolling down to the bottom, select an option and then click again on the dropdown it produces a flicker. Just in firefox 3.6

selectmenu not working with jquery 1.4.3 and jquery ui 1.8.6

Have I done something wrong or is this a bug? I cannot get selectmenu to display properly on any browser.

Here's my test:
http://www.mondotech.org/jquerytesting/jqueryselect/

Fails when you have an empty select

When you have an empty select, the widget fails and the original select is displayed as well as the selectmenu widget is displayed next to it. Many web sites use dynamically generated select controls which could very well be empty.

IE6: Icon positioning problems

Icons are hidden after hover and have wrong positioning in IE6. Needs to be verified on Virtual Machine.

Problem with jquery 1.4.4 and jquery ui 1.8.6

I have downloaded the latest version of jquery and jquery ui version.
Now when I try to click on a selectmenu widget I get the following error on the console:

jquery-1.4.4.min.js:101
Uncaught TypeError: Object # has no method 'replace'
k.matchesSelector jquery-1.4.4.min.js:101
c.extend.filter jquery-1.4.4.min.js:109
c.fn.extend.is jquery-1.4.4.min.js:105
$.widget._create.optGroupName jquery.ui.selectmenu.js:173
c.event.handle jquery-1.4.4.min.js:63
c.event.add.h.handle.o

Keyboard control

Its not possible to use arrow keys, page up, and page down (while home and end does work) at the moment after open the list with space.Additional there is no visual focus set.

The var newIndex is NaN in function _moveFocus. This affects all browsers.

Thanks to Andreas for reporting this issue. http://github.com/fnagel/jquery-ui/issues#issue/5

Change ui-select-menu display to inline-block rather than block

It would be helpful to use inline-block rather than block for the ui-select-menu style because this allows it to be inline w/ other elements. Because of it's block style it was wrapping to the next line when adjacent to other elements. Changing the style to inline-block provided more flexibility.

Great job!

selectmenu typeahead should allow multiple characters

The default functionality on a selectmenu element in OSX is to find "better" options if more than one key is pressed after one another. Currently ui.selectmenu is cycling through all the available options based on a single character.

select boxes side by side

Since the anchor tag is set to display:block, if you have select boxes next to eachother, they stack instead. display:inline-block fixes this, but it's not backwards compatible.
select boxes are inline by default, so they should be that way with this plugin.

Clicking empty select throws script exception

When the select is empty, it is styled correctly, but throws exception when clicked:

Error: this.list.addClass(self.widgetBaseClass + "-open").attr("aria-hidden", false).find("li:not(." + self.widgetBaseClass + "-group):eq(" + this._selectedIndex() + ") a")[0] is undefined

alt+ up/down does nothing

I thought this was reported before, but I didn't see it in 'search issues' so...

It is standard functionality in IE/FF/Opera for ALT+UP/DOWN, on a select menu, to open up the menu and have the currently selected item be highlighted.

Current functionality opens the menu when space is pressed, which is non-standard as space doesn't do anything in other browsers, and when it opens, nothing is selected most of the time.

Help to improve the Wiki (please post hints and snippets here!)

The wiki needs some attention. Help appreciated!
https://github.com/fnagel/jquery-ui/wiki/Selectmenu

You can add snippets here, I will add them asap.

Disable single option (summery)

We need to add the possibility to disable a single option within a select.

Make selectmenu update contents with ajax

hello, I have some select menus in my website that are dinamics, for exemple, let me say that I have a select with some countries, when the user select a contry, the state select menu need to change to show de states of this country, there is some way to do this?

Thanks!

Invalid positioning of selectmenu if <select> is located inside block width overflow: auto

Menu dropdown is attached to document.body if select box have been placed inside a div with fixed height & overflow: auto, dropdown may appear not in the right place

"disable" doesn't disable adding and removing .ui-state-hover

When the selectmenu is disabled, the hover state is still added when the mouse is over.
I've added if ( o.disabled ) { return false; } after lines 109 and 112 and it solved the problem, but this may be needs some more testing.

Best regards,
Stoyan Koevsky

Not rendering in FF when served in Thickbox

I've implemented selectmenu in a page that will be served using Thickbox. The selectmenu renders / functions perfectly when the page is viewed in a Firefox window (or tab).

However, the selectmenu does not render when that same page is served in a Thickbox window.

Firefox version 3.6.13
jQuery v1.4.4

Any help would be greatly appreciated.

Call for real world examples!

Please post some real world examples. They will be added in the Wiki as demos.

Thanks and happy posting!

Need to change opening direction under certain circumstance

This could be needed if theres not enough room, for example when the widget is placed at the very bottom of a page.

Add ARIA and WCAG 2.0 features

Add ARIA and WCAG 2.0 features to improve usability and accessibility.

selectmenu does not work when inside a jQuery Dialog

I am trying to use selectmenu inside a jQuery modal dialog but it does not work.

I have created a small sample here that reproduce the bug.

Keep up the good work!

Selectmenu dropdown doesn't hide when I scroll element with overflow: auto

If I have inside a block with fixed height and overflow set to auto, opened selectmenu always stays in the same place when I scroll this block. Default just hides dropdown at mousewheel (at least in ff & chrome)

Issue with jQuery 1.4.4

in the list, this part causes jQuery 1.4.4 to throw an error

.bind('mouseout blur', function(){
if($(this).is( self._selectedOptionLi() )){ $(this).addClass(activeClass); }
$(this).removeClass(self.widgetBaseClass + '-item-focus ui-state-hover');    
});

The error is "expr.replace is not a function" on line (jQuery source):
4148: expr = expr.replace(/=\s*(['"]])\s]/g, "='$1']");

Actually I'm not sure if this is a jQuery core bug, but when I change the bindings to "mouseleave blur" everything is fine.
Maybe it deserves a bit of investigation.

Better image support

This meets 95% of my needs in it's current form, great work!

The main problem I have is that I need to display images that I cannot specify in advance in my CSS file. For instance, I need to show a drop down list of people, with their profile photo next to their name. Currently, I'm displaying their Gravatar (http://gravatar.com), so I need to display an image like the following:

Is this possible in the current version? If so how? If not, it would be a valuable feature.

How to fix empty space inline-blocks with another dom elements? and ISSUE SCROLL

for example:
http://gestionb.host.sk/img/Space.gif

I'm creating dinamically content there is someone tip to repopulate a selectmenu without ajax callback, before use selectmenu i rebuild the select with a global scope class array this way only one call to server is needed , and actually i don't know the method to refresh delete destroy the selectmenu and recreate the new selectmenu..
hopping some help.
My best regards
Diego.

highlighting and focus indications

There seems to be an issue with mouseout where it doesn't remember the highlighting state before mousein.

--If you tab through some select boxes, then move the cursor across it, on mouseout it loses the blue highlighting that it had a moment before.

--If you click the box, the click again to close and move the mouse away, it's still focused, but it loses its highlighting. Though I noticed if I navigate away from the page then back, it's highlighted again.

--If a menu item is selected and you click the menu, the selected item is orange, if you mouse over that item then move the mouse out of the box to the left or right, it loses orange highlighting until you move mouse back into box.

Dropdown doesn't hide

Dropdown doesn't hide when an item selected. It's occurs when I use jquery 1.4.2 and jquery-ui 1.8.4.
If I go to line 410 and change this.element.trigger('change'); to this.element.triggerHandler('change');, the dropdown hides.

FF 3.6.12 - wrong position of dropdown menu (1px left shift)

Hello!

I`m currently experiencing a very strange bug with jQuery UI Selectmenu and Firefox. In all another browsers it works fine (I did not check in other versions of Firefox, but it does not matter in this case). Here is description of a problem and steps to reproduce a bug:

1. In the source code go to demos/selectmenu/default.html
2. For the main form declare a fixed width and margin:0 auto (bug will not occure with liquid width or without margin:0 auto)
3. Make a content of a page taller, to make browsers vertical scrollbar appear (bug will not occur without vertical scrollbar)
4. Check out any dropdown menu now ("dropdown" Style will the best example). ul.ui-selectmenu-menu will be wrong positioned, there will be 1px shift to the left

This bug, like I said, appears only in FF, so I`m confused a little bit. Is there any workaround?

z-index not updating when selectmenu used inside dialog

It appears the z-index is set to a static 1005 inside the css for the selectmenu. This works at first but if you create a jQuery dialog and add a few input box's and a selectmenu then start clicking the input box's you will noticed that the z-index starts increasing for each click. Six clicks later and the selectmenu dropdown no longer appears.

tabbing in opera doesn't work

just as the title says... open demo in opera 10.63, hit tab... nothing

Scroll Broken in FF

with maxHeight set, I can't seem to scroll the list with either the up or down arrows, or by click on the scroll bar "white space." I can scroll with the slider, or keyboard. Doesn't seem to be an issue in IE (tested in 9)

Spaces in optgroup label causes duplications

Spaces in optgroup label causes the label to be repeated for each option

this._refreshValue is not a function

I have a few select fields that I'm showing/hiding based on another select fields value. It works fine in styling the shown selects the first change. After that it no longer works and I receive this error: "this._refreshValue is not a function". Any ideas?

List width incorrectly computed.

When omitting one of the width options the width of the widget is not calculated properly. Changing the following helps but the button is still misaligned right next to the option text:

//original selectmenu width
var selectWidth = this.element.width();

to:

//original selectmenu width
var selectWidth = this.element.outerWidth();

jQuery ui version 1.8.6
jQuery version 1.4.4

Check ARIA and WCAG 2.0 features

Check already implemented ARIA and WCAG 2.0 features to improve usability and accessibility.

focus lost in certain cases

When done in dropdown style, or when list is completely above or below box, if you click and click the box again closing it, without selecting anything new, it loses focus. After that you can't use the arrows unless you tab away and tab back.

Need a way to set the value programatically

There doesn't seem to be a way to set the value of the selectmenu programmitcally. For example, if I had a select element with id "mySelectElement" that I made into a selectmenu, and i wanted to select one of the options, I should be able to do

$('#mySelectElement').selectmenu(); $('#mySelectElement').selectmenu('setValue', 'valueOfThirdOption');

As it stands now, I can set the value if I know the index of the option that I want to select, but why can't I set the value using the value itself, just like I would a non-selectmenu select element $('#selectElement').val('valueOfThirdOption')

Some fixes for current ui selectmenu

Hi Felix,

I've just tried your updated version of jquery.ui.selectmenu.js from:
http://github.com/fnagel/jquery-ui/blob/selectmenu/ui/jquery.ui.seletmenu.js

There are still some issues:
*) _setData must read _setOption, otherwise the selectmenu will not respect e.g. the disabled state of the original select box

*) newelement can be null under unclear circumstances in IE8
You have a fix in line 124 (change event on original selectmenu) for this. In my opinion the very same should be used on line 404 (retainfocus), which should be something like this:
// newelement can be null under unclear circumstances in IE8
if(retainFocus){if (this.newelement) { this.newelement[0].focus(); }}

*) moving the focus with keyboard does not work and additionally throws an error in IE8. => "this._optionLis.ey(...).find(...).attr(...).0 ist Null oder kein Objekt". As I do not need this function anyway I have commented out the keydown part (starting from line 77 and from line 240)

*) it would be nice if "destroy" would return the element itself (return this) at the end, at least I have used it once.

Greetings from Austria
Andreas

Disable does not work in certain circumstance

This seems to be an bug which needs more investigation. Following code is an example in which the links (#on and #off) work but the select callback does not. The disable function within the method always calls the enable method of the jQuery UI widget.js. I just don't know why.

This needs further investigation, but seems to be a UI internal problem. Help is appreciated!

JS

var speedB = $('select#speedB').selectmenu();

        var speedA = $('select#speedA').selectmenu({
            select: function(event, options) {
                if (options.value) { 
                    speedB.selectmenu('enable');
                } else {
                    speedB.selectmenu('disable');
                }
            }
        });

        $("#on").click(function(){
            speedB.selectmenu("enable");
        });

        $("#off").click(function(){
            speedB.selectmenu("disable");
        });

HTML

on

off



Default: "popup" Style

Select a Speed:
On Off

    <h2>Same with option text formatting</h2>
    <fieldset>
        <label for="speedB">Select an Address:</label>
        <select name="speedB" id="speedB">
            <option value="Slower" selected="selected">Slower</option>
            <option value="Slow">Slow</option>
            <option value="Medium">Medium</option>
            <option value="Fast">Fast</option>
            <option value="Faster">Faster</option>
        </select>
    </fieldset>
</form>

Nesting issue with JQuery Tabs

Great job on the select menu but we did run into a problem where it seems to not work when the select menu is called within a tag that is NOT the first JQuery tab. When in the first one it opens properly. When nested into the second or third tab the select is there but the width is set to 1px.

Change selected value on source select?

I must be missing something with this widget, as far as I can see it does not change the selected value on the source selecte element on change?
Are you supposed to do that by yourself in the callback or what, seems like it should be handled within the widget since it's replacing the original select?

Edit: I'm sorry, i was a bit too hasty with my conclusion. Read the code to quickly and missed the value-method. Sorry again for spamming! Any mod can delete this entry.

Destroy method needs some work

Andreas asked: "it would be nice if "destroy" would return the element itself (return this) at the end, at least I have used it once."

Im not sure about this. For what do you need this?
I checked different UI widgets, every single one uses a different one:

return this

return $.Widget.prototype.destroy.call( this );

$.Widget.prototype.destroy.apply( this, arguments );

This is the recommended way described in http://jqueryui.com/docs/Developer_Guide

Some even do nothing. What is best practice?

Accessibility review

Thread to talk about the new version of the accessibility add-on for jQuery UI Tabs which is now integrated into the original widget.

Please check previous discussion at:
http://github.com/fnagel/jQuery-Accessible-RIA/issues#issue/36

Please make sure to use the correct branch:
http://github.com/fnagel/jquery-ui/tree/tabs-accessibility

Latest version (zip): http://github.com/fnagel/jquery-ui/zipball/tabs-accessibility
Demo file within the zip: /demos/tabs/index.html

Any feedback really appreciated!

Wrapping selectmenu in div for css theme scope

On the open event, this.list is always being appended to the body.

I had attempted to wrap the selectmenu in a div like $(#id-menu).wrap('in a div with a class for the scope');
Should I be doing this a different way or perhaps update the open event to reappend to it's previous parent?

transparent border for LI does not work in IE6

IE6 is not able to display the border with transparent color. Its dotted actually.

Not sure if the transparent border is necessary but I would assume they are.

This is a possible solution (THX to mad-doctor), but causes incorrect linking which is a no-go for usability:
.ui-selectmenu-menu li { border-color: fuchsia; filter:chroma(color=fuchsia); width:100%; }

ul cleanliness

The ul's are all stored in the root body of the dom, it would be better if they were all contained in a div with class jqui-selectmenu, or something.

also:how do I apply labels to an issue?

handling of window resize doesn't work

the window resize event does not call _refreshPosition because the proxy function is only created and not called.

edit: Can't figure out how to add labels, but this issue should probably have the "_selectmenu" and "bug" lebels

ui/jquery.ui.selectmenu.js - lines 215-217: (dec 24, 2010 version)
$(window).bind("resize.selectmenu", function(){
$.proxy(self._refreshPosition, this);
});

should be:
$(window).bind("resize.selectmenu", $.proxy(self._refreshPosition, this));