Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus. ui.selectmenu.js, line 377 character 20

[shareprojects]

i had this error in IE8

Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus. ui.selectmenu.js, line 377 character 20

putting a try catch around the focus fixed the error

if(retainFocus){
                try {
                    this.newelement[0].focus();
                } catch(err){
                    return false;
                }
            }   

[fnagel]

Can you give some more info how to reproduce this issue? Perhaps with a demo fiddle (see #61)?

Thanks for your contribution!

[shareprojects]

i don't have time to put it in fiddle but here is the setup

" src="/js/jquery-1.7.1.js"></script>
 src="/js/jquery-ui-1.8.16.custom.min.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="/css/ui.selectmenu.css" />

it's just the basic setup. if you take the demo file and use those versions in IE 8 it should reproduce the error in the console

the version of IE8 is 8.0.6001.18702 on XP Pro

[fnagel]

jQuery UI 1.7.1 is currently not supported. I will fix this soon.

[fnagel]

Mhh I must confess Im not quite sure which version youre using as code like

this.newelement[0].focus();

is pretty old. At least older than v1.2.0, so I assume the version you're using is pretty outdated. Please note v1.2.x does only support jQuery 1.6.x so be patient till ive updated Selectmenu to work with jQuery 1.7.2

[fnagel]

Latest version does support jQuery 1.7.x. Please test and give feedback!

[zuormo]

As I wrote in the other post #228, if you use last version of jQuery or previous, and you put your selectmenu inside a form html, then it will stop work. The page will load correctly, the script will stylize the select element, but then, when you click the element, it will rise an error and if you debug that error you'll see that the script crashes when it arrive at row 573

if (link.length) link[0].focus();

I've done a little bit of debug and the link.lenght value is 1 (and if you add a watch on that variable, it shows that the element is properly selected) but then, when the script try to exec link[0].focus(), it crashes.

I Confirm that this is in IE8 and IE8 Compatibility Mode. No problem in Firefox 13

[zuormo]

I've to correct myself. If you use the method .toggle() of a selected item, then the selectmenu stop dropping down the menu, even if the component is not into a form. It does not crush but does not show the menu.... so this seems a different issue.

[zuormo]

I've made some tests. This issue rise either if you use the form or not. And even if you do not use the Toggle() method, but you use a simple alternate hide() and show(), when you move the focus from the change textbox to the selecmenu, during the change event, the selectmenu stop working. But if you move the focus to the body (for example by clicking on the white page) no problem raise.

Here you could try http://jsfiddle.net/AbEDY/5/

[fnagel]

@zuormo Mhh, I am able to reproduce this on IE8 in VM but I have no clue how to fix it. Any idea?

Steps to reproduce in IE8: 1) change text in input 2) click on selectmenu 3) => Text below is hidden 4) click on seleectmenu 5) => Selectmenu does not open

I dont think your problem is related to the one this issue is about. Why? Because @shareprojects is using an outdated version and I do not get any JS error. Please open a new issue for this problem!

ps: There is no public method "toggle".

[fnagel]

@shareprojects Any feedback? Hint: your version is outdated and not compatible with jQuery UI 1.7.1.

[pekim]

This problem happens for me with 1.3.0pre and jQuery 1.7.1. I'm working around it for now by wrapping line 573 (https://github.com/fnagel/jquery-ui/blob/selectmenu/ui/jquery.ui.selectmenu.js#L573) in a try/catch block.

        try {
            if (link.length) link[0].focus();
        } catch (exception) {
        }

It doesn't seem to break any functionality as far as I can tell, but I don't like the approach of ignoring an exception.

@dynamite-ready

[fnagel]

@pekim Can you give me a detailed description how to reproduce this issue? With a demo fiddle (see #61) or a zip please! Perhaps you should open a new issue as this one is already messy ;-)

[fnagel]

Any feedback on this issue?

[fnagel]

Any feedback on this issue?

[pekim]

I'm really sorry for the delay. This is one of those tasks that I keep meaning to get round to, and keep putting off.

I've just spent an hour trying to narrow this down in to a small reproducible example, and I've failed miserably. I've not given up though. I'm going to try again tomorrow.

[fnagel]

Any feedback on this issue?

[fnagel]

Any feedback on this issue?

[fnagel]

Closed as no feedback was given. Please reopen if needed.

[gpoole]

I have encountered this issue on one of my projects and it appears to be caused (in my case at least) by a strange glitch in _refreshPoisiton's call to .position on listWrap:

this.listWrap
    .removeAttr( 'style' )
    .zIndex( this.element.zIndex() + 1 )
    .position( $.extend( positionDefault, o.positionOptions ) );

The issue I experienced included this error message, but catching the exception didn't help as the dropdown also failed to appear when clicked. I've come to the conclusion that it has something to do with the select list activator being located along the bottom edge of its parent container. In my case applying 'any' height at all to the container with the select in it prevented the bug from occurring.

Please let me know if any of this information is useful! I'm still not 100% sure on how to replicate it outside the specific problem I'm having, but I can try more tests if you have any suggestions?

[fnagel]

Hey @gpoole, as this issue is cluttered with different problems I would recommend to open a new issue, providing all needed information, see #61