Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#8786 closed bug (wontfix)

display issue when using autocomplete in IE7

Reported by: palloquin Owned by: palloquin
Priority: minor Milestone: 1.10.0
Component: ui.autocomplete Version: 1.9.1
Keywords: Cc:
Blocked by: Blocking:

Description

I have this strange issue, that occurs in IE7 mode (in my case IE9 in IE7 mode).

when autocomplete displays the suggestion list other formatting on the page gets screwed up.

I have a test here: http://jsfiddle.net/RdY4y/3/

Make sure to test using IE set to IE7 standards mode.

Doing a lot of digging I found that if I change the order of 2 lines of jQueryUI code the issue seems solved: (watch for the line: this._resizeMenu();)

__suggest: function( items ) {
	var ul = this.menu.element
		.empty()
		.zIndex( this.element.zIndex() + 1 );
	this._renderMenu( ul, items );
	this.menu.refresh();

	// size and position menu
	ul.show();
	this._resizeMenu();
	ul.position( $.extend({
		of: this.element
	}, this.options.position ));

	if ( this.options.autoFocus ) {
		this.menu.next();
	}
},

change to:

__suggest: function( items ) {
	var ul = this.menu.element
		.empty()
		.zIndex( this.element.zIndex() + 1 );
	this._renderMenu( ul, items );
	this.menu.refresh();

	// size and position menu
	ul.show();
	ul.position( $.extend({
		of: this.element
	}, this.options.position ));
	this._resizeMenu();

	if ( this.options.autoFocus ) {
		this.menu.next();
	}
},

Change History (12)

comment:1 Changed 7 years ago by Scott González

Owner: set to palloquin
Status: newpending

That fiddle is invalid since you're using a 1.8.9 theme with 1.9.1 code. Do you still have the problem if you use the correct theme?

comment:2 Changed 7 years ago by Scott González

Resolution: notabug
Status: pendingclosed

I don't see the issue when using the 1.9.1 theme: http://jsfiddle.net/RdY4y/4/

comment:3 in reply to:  2 Changed 7 years ago by palloquin

Replying to scott.gonzalez:

I don't see the issue when using the 1.9.1 theme: http://jsfiddle.net/RdY4y/4/

Hi Scott,

I'm testing the update version with the 1.9.1 theme and still have the same issue (e.g. when searching for 'java'. Are you sure you have set your browser to IE7 mode?

comment:5 in reply to:  4 Changed 7 years ago by palloquin

Replying to scott.gonzalez:

Yes. broken with old theme, working with new theme, working with new theme and browser mode changed also.

Then something weird is going on...

Check this screen: http://i216.photobucket.com/albums/cc31/palloquin/screenshot1.png

Still happening.. I actually found that on sometimes the yellow bar does not get cut, but then when I type something again, it does...

comment:6 Changed 7 years ago by Scott González

Resolution: notabug
Status: closedreopened

I am seeing it change based on the values that I type, which is extremely odd.

comment:7 Changed 7 years ago by Scott González

Status: reopenedopen

The suggested fix isn't valid because the menu must be sized before it's positioned for collision detection to work properly.

comment:8 in reply to:  7 Changed 7 years ago by palloquin

Replying to scott.gonzalez:

The suggested fix isn't valid because the menu must be sized before it's positioned for collision detection to work properly.

I've found a workarround by using the appendTo option to append the autocomplete a specific DIV: http://jsfiddle.net/RdY4y/6/

comment:9 Changed 7 years ago by Scott González

This is a crazy bug. I've tracked it down to the live region, which is <span class="ui-helper-hidden-accessible">...</span> and is inserted immediately after the input. I've got a reduced test case locally that fails if I just insert a span with the same styling directly into the page and don't even load jQuery UI at all. However, if I remove jQuery from the page (it's not being used, just loaded), then the bug goes away.

I'll continue to investigate and will post a reduced test case when I'm done.

comment:10 Changed 7 years ago by Scott González

This was introduced in jQuery 1.7, I'll try to track down the specific change.

comment:11 Changed 7 years ago by Scott González

Resolution: wontfix
Status: openclosed

Introduced in this commit: https://github.com/jquery/jquery/commit/93750cee36f0b2edc1afd2dad64d9306865a39b9

Reduced test case: http://dev-test.nemikor.com/bugs/jquery/layout-change-on-load.html

I don't think there's anything we can/should do about this in UI, but I'm talking to the core team about this to determine if they'll try to fix it. This doesn't occur in real IE7.

Note: See TracTickets for help on using tickets.