Side navigation
#3260 closed bug (fixed)
Opened August 18, 2008 09:37PM UTC
Closed April 17, 2011 07:26PM UTC
Last modified April 17, 2011 08:16PM UTC
Weird IE7 behavior when focussing on a text input inside a div with padding
| Reported by: | asprouse | Owned by: | |
|---|---|---|---|
| Priority: | low | Milestone: | 1.next |
| Component: | effects | Version: | 1.2.6 |
| Keywords: | IE7, slide | Cc: | flesler, asprouse |
| Blocked by: | Blocking: |
Description
Summary
Here is a very simple example which will produce this behavior:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<style type="text/css">
#box {
padding: 10px;
}
</style>
<script type="text/javascript">
function show () {
$("#box").slideDown("slow",function(){
$("#target").focus();
});
}
</script>
</head>
<body>
<input type="button" value="Click Here" onClick="show()" />
<div id="box" style="display:none">
<input type="text" id="target" />
</div>
</body>
</html
What we want to happen is to use the slideDown effect to show the "box" div and then focus on the "target" input. This works fine in firefox, however IE7 starts to do the slide down effect and once the callback is performed, "target disappears and the cursor appears to the left of the button. This does not happen if the padding is removed. Another way in which this works properly is if there is something to delay the focus() function call. For example:
function show () {
$("#box").slideDown("slow",function(){
alert("BOO");
$("#target").focus();
});
}
or
function show () {
$("#box").slideDown("slow",function(){
setTimeout(function(){$("#target").focus();},1);
});
}
It seems as if there is some issue with the callback be fired while IE is still calculating the padding, but that is just a guess.
Steps to Repeat
1. Copy the html code from above into an .html file
2. Download the latest stable jQuery (at this time 1.2.6)
3. Load the .html file created in step 1 into IE7
4. Click the "Click Here" button
Attachments (3)
Change History (6)
Changed August 18, 2008 09:41PM UTC by comment:1
Changed August 19, 2008 11:44AM UTC by comment:2
| cc: | → flesler, asprouse |
|---|---|
| component: | core → fx |
Changed August 12, 2010 12:41AM UTC by comment:3
Attaching a test case with jQuery 1.4.2, which seems to work in IE8. Needs to be tested with IE7.
Changed October 25, 2010 06:55AM UTC by comment:4
| keywords: | → IE7, slide |
|---|---|
| milestone: | 1.3 → 1.5 |
| priority: | major → low |
| status: | new → open |
Let's test Dave's patch and see if we think it's something we can get in soon. Seems valid as an IE7 compatibility issue.
Changed April 17, 2011 07:26PM UTC by comment:5
| milestone: | → 1.next |
|---|---|
| resolution: | → fixed |
| status: | open → closed |
I believe this has been fixed http://jsfiddle.net/timmywil/awxA9/show. Feel free to reopen and provide an updated
test case if necessary.
Here is a screenshot of the error in IE7:
[[Image(ie7error.jpg)]]