Autocomplete-enabled text input does not keep value when using back button in browser

After further investigation, I think I've discovered the root of the problem:

It appears that disabling the browser's native autocomplete functionality for an input also disables its ability to remember what its value was when you return to the page via the back button. This appears to be true in both Chrome and Firefox. Here's a simple test (runnable at http://jsfiddle.net/TylerRick/aaRSk/):

<input autocomplete="off" type="text" name="test" value="change me"/>

To reproduce behavior: Change the value of the input, then click the jsFiddle logo in the top-left corner, and press Back. It will have reverted to its starting value of "change me".

This is the line in jquery-ui-1.8.16/ui/jquery.ui.autocomplete.js that disable's the browser's native autocomplete functionality:

      .attr( "autocomplete", "off" )

When I remove that line and try leaving the page and pressing Back, it does in fact keep the value as I left it just before leaving the page. And the jQuery UI Autocomplete plugin is still fully functional.

However, the browser's native autocomplete drop-down list drops down ''over top of'' the plugin's drop-down list, which is probably the reason the author of this plugin disabled native autocomplete.

The native autocomplete can apparently be dismissed with Esc without dismissing the plugin's list (a second press of Esc will dismiss that list too), but leaving native autocomplete on is probably still too much of a usability problem to recommend removing this line.

Having said that, does anyone know of any other solutions to this problem?

Autocomplete: Re-enable native autocomplete whent he page is unloaded. Fixes #7790 - Autocomplete-enabled text input does not keep value when using back button in browser.

Changeset: 81b2ef4a6088cb99863c2d318947355a58019362

Autocomplete: Re-enable native autocomplete whent he page is unloaded. Fixes #7790 - Autocomplete-enabled text input does not keep value when using back button in browser.

Changeset: b41873ba0dd8f84ec282f77d029c7dc0ee99b873

I believe this bug needs to be re-opened. The fix added for this in 1.8.17 causes a problem when the page sets a "window.onbeforeunload" handler, because the fix overwrites the handler with a new function and the original function is lost.

In the first changeset above (81b2...), the following code was added to autocomplete.js, in the _create() function:

// turning off autocomplete prevents the browser from remembering the
// value when navigating through history, so we re-enable autocomplete
// if the page is unloaded before the widget is destroyed. #7790
this._bind( doc.defaultView, {
  beforeunload: function() {
    this.element.removeAttr( "autocomplete" );
  }
});

The code has since been changed slightly in 1.8.18, and in today's version of the code currently in github, but the problem still happens in those versions as well.

An example showing the problem can be seen here: http://jsfiddle.net/EuTgH/

So don't do that. Bind using jQuery, like the autocomplete plugin does.

Replying to [comment:6 scott.gonzalez]:

So don't do that. Bind using jQuery, like the autocomplete plugin does.

That's a good workaround, thanks. However, I don't think overwriting an unsuspecting user's onbeforeunload handler is a good solution. It took me quite a while just to figure out what was causing the problem, and even if this restriction was documented somewhere, I wouldn't have known it was the autocomplete code causing it. Couldn't the original function be saved and appended to the new one being added?

No. http://docs.jquery.com/Won't_Fix#Inline_Event_Handlers

I also object to the fix for this bug. I've spent many hours trying to find the problem. My app binds an anonymous function to the onbeforeunload event, and when I refresh part of the page that has a jQueryUI widget, the ajax response (which includes the jQuery UI autocompleter) overwrites my already-bound handler. So the solution proposed in comment:6 is not acceptable to me.

I'm going to remove this patch from my copy of jQuery UI.

Strongly recommend finding another solution; this one is exceptionally unfriendly.

Replying to [comment:5 russellg99]:

I believe this bug needs to be re-opened. The fix added for this in 1.8.17 causes a problem when the page sets a "window.onbeforeunload" handler, because the fix overwrites the handler with a new function and the original function is lost.

I filed ticket:8439 to track this new issue.