unable to focus input box after opening modal

I am opening a modal and then trying to focus on an input box, but its not working. Futher, I am getting this error (in IE):

**Error: Can't move focus to the control because it is invisable, not enabled, or of the type that does not accept the focus. **

Here's my relevant javascript:

    if ($('modalLink').className == 'active') {
        Control.Modal.open($('modalWindow').innerHTML,{
        afterOpen: function() {
            $('ModalName').focus();
        }
        });     
    }

div#modalWindow has style="display: none;" and input#ModalName is an input box within it.

Posted June 21st, 2007 at 11:09am by craig_willard

If it is an Ajax request, try doing an afterSuccess callback. If not post a URL.

Posted June 21st, 2007 at 12:31pm by ryan

It is not AJAX. Here's a link: http://www.wediditman.com/work/minimal.htm.

Posted June 22nd, 2007 at 7:22am by craig_willard

I also wanted to mention that if you close the modal and then re-open it, the input box will have focus.

Posted June 22nd, 2007 at 9:08am by craig_willard

That should work, indeed it is not! I will look at this and address tomorrow. Thanks for posting the URL, it looks great by the way.

Posted June 22nd, 2007 at 7:42pm by ryan

Hey Ryan. Thanks for looking into this. I notice that using control.modal 2.2.0 does not fix this issue. Have you had a chance to look into it?

Thanks! --Craig

Posted June 25th, 2007 at 7:44am by craig_willard

Hrm... This is one of those "works for me" things. Not on your page mind you (which is still using 1.2), but on a local test, and for a bunch of other sites I work on. Stumpted.

Posted June 25th, 2007 at 11:21am by ryan

Ryan,

What version does it work for you with, and where can I download that version?

Posted June 26th, 2007 at 7:16am by craig_willard

The bad news is, it's part of my test suite, and it's always worked. Can you send a zip file to ryan@livepipe.net that has all of those files so I can edit the code you have and find the bug?

Posted June 26th, 2007 at 11:05am by ryan

This is caused by the modaloverlay's position: fixed style. That triggers a bug in firefox that causes the text cursor to dissapear. This might have to do something with the focus issues aswell. In my case the input field is focused, and writeable, but i dont have the text cursor until the modaloverlay position is set to anything else than fixed.

Posted June 26th, 2007 at 11:21am by bouveng

I just encountered this issue (and worked around it). To give something back to the community, here's how to do it.

Open Control.Modal.x.x.js and change the lines where it says:

  overlayStyles: {
        position: fixed',

to:

  overlayStyles: {
        position: 'absolute', /* 'fixed' was BUGGY! */

Now the input field works, but we just made the ground for a new bug: The modal_overlay div is only 100% height of the browserwindow (in firefox), not 100% of the page. I just did a quick google and found this piece of code on quirksmode.org, which i put into the Control.Modal.x.x.js file again, between the two lines:

          var body_tag = document.getElementsByTagName('body')[0];
            body_tag.appendChild(Control.Modal.overlay);

get changed to:

          var body_tag = document.getElementsByTagName('body')[0];
            /* inserted to calc actual height */
            Control.Modal.overlay.style.height = 'auto';
            var x = body_tag.offsetHeight;
            Control.Modal.overlay.style.height = x + "px";
            /**/
            body_tag.appendChild(Control.Modal.overlay);

I hope this works. what it does is just getting the offsetheight (actual height) of the body-tag and apply it to the modal_overlay div.

Posted July 11th, 2007 at 5:21am by clemens

Thanks clemens! My concern before testing it is the problems it may cause with IE and Safari, but I will test this when I get a chance, thanks for posting!

Posted July 12th, 2007 at 2:03pm by ryan

hi bouveng,

thanks for your fix! it works quite well, but sometimes the overlay div spans not over the complete height of the page because

var x = body_tag.offsetHeight;  
Control.Modal.overlay.style.height = x + "px";  

works not correctly.

here is my dirty fix:

replace

var body_tag = document.getElementsByTagName('body')[0];  
body_tag.appendChild(Control.Modal.overlay);  

with

var body_tag = document.getElementsByTagName('body')[0];
Control.Modal.overlay.style.height = 'auto';
var width = 0;
var height = 0;
if(typeof(window.innerWidth) == 'number') {
    width = window.innerWidth;
    height = window.innerHeight;
} else if(document.documentElement
    && (document.documentElement.clientWidth
    || document.documentElement.clientHeight)) {
    width = document.documentElement.clientWidth;
    height = document.documentElement.clientHeight;
        } else if( document.body && (document.body.clientWidth
            || document.body.clientHeight)) {
    width = document.body.clientWidth;
    height = document.body.clientHeight;
}
Control.Modal.overlay.style.height = height + "px";
body_tag.appendChild(Control.Modal.overlay);

as i've mentioned before, it's a quick and dirty fix...neverminded it works for me(tm) :)

cheers marc

Posted July 26th, 2007 at 4:35pm by marc

I cannot get this to work, even applying the fix and using the latest version of the library.

Posted October 19th, 2007 at 2:58pm by craig_willard

I'm having this problem after trying the fix as well. I'm using version 2.2.3. Any chance this will get looked into more than just "it works for me"?

Posted January 11th, 2008 at 11:47am by mjlachman