Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#8858 closed bug (fixed)

Autocomplete: Fails when appendTo is detached from the DOM

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

Description

I get a "Cannot read property 'element' of undefined" since 1.9 in all of my automcompletes.

Related code: https://github.com/jquery/jquery-ui/blob/1-9-stable/ui/jquery.ui.autocomplete.js#L-182-L195

So .data('menu') returns undefined. Tell how to i can help.

Change History (6)

comment:1 Changed 7 years ago by tj.vantoll

Owner: set to ushi
Status: newpending

Thanks for taking the time to contribute to the jQuery UI project! We're going to need a reduced test case that shows the issue that you're describing.

Also, be sure to test against the git version of both jQuery UI and jQuery to ensure the issue still exists. To get started you can use this boilerplate: http://jsfiddle.net/ZgAqH/ Open the link and click to "Fork" (in the top menu) to get started.

comment:2 Changed 7 years ago by ushi

Status: pendingnew

Here is some code the works with 1.8 but not 1.9:

http://jsfiddle.net/D6QCR/9/

Last edited 7 years ago by ushi (previous) (diff)

comment:3 Changed 7 years ago by tj.vantoll

Status: newopen
Summary: Read element from undefinedAutocomplete: Fails when appendTo is detached from the DOM

This is happening because the node passed to appendTo is a detached DOM node. Therefore this line this.document.find( this.options.appendTo || "body" )[ 0 ] in the code block below will end up failing because the appendTo is not in the document.

		this.menu = $( "<ul>" )
			.addClass( "ui-autocomplete" )
			.appendTo( this.document.find( this.options.appendTo || "body" )[ 0 ] )
			.menu({
				// custom key handling for now
				input: $(),
				// disable ARIA support, the live region takes care of that
				role: null
			})
			.zIndex( this.element.zIndex() + 1 )
			.hide()
			.data( "ui-menu" );

I'm not sure this is something jQuery UI supports. scott_gonzalez?

Last edited 7 years ago by tj.vantoll (previous) (diff)

comment:4 Changed 7 years ago by ushi

Hmm, i hope that jQuery UI supports this. Here is my use case

$.ajax('/some.html', {
  success: function(someHtml) {
    var someHtml = $(someHtml);
    var complete = box.find('.complete');

    complete.find('input').autocomplete({
      appendTo: complete,
      source: ['hello', 'world']
    });

    someButton.click(function() {
      someHtml.appendTo('body');
    });
  }
});

This works great with 1.8.

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

Resolution: fixed
Status: openclosed

Autocomplete: When appendTo is a jQuery object or a DOM element, don't search against the document. Fixes #8858 - Autocomplete: Fails when appendTo is detached from the DOM.

Changeset: dec844570fae5edf56876b760b9358fde2ecb5e7

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

@ushi I'm not sure if we'll do a 1.9.3 release, so you'll either need to wait for 1.10.0 or implement a workaround in your code. To work around this in 1.9, you can not set appendTo on creation, then immediately after you append to the body, change the appendTo option.

Note: See TracTickets for help on using tickets.