spree/spree — pull request #2408 by jphpsf (2013-01-09 04:25:57+00:00)
Title: Fix autocomplete issue with latest jquery UI

I stumbled upon this issue today. This was after upgrading to Spree 1.2.3 yesterday.

**Step to reproduce:** in the Spree admin, go to the *Orders* tab and create a *New Order*. Click *Customer Details* in the sidebar and search for a customer in the *Customer Search* area. When the autocomplete results appear click on the email address of a customer (note: this is kind of a edge case and you must click exactly on the ````

```` tag containing the email address).

**Expected behavior:** the customer should be selected and the form should be populated

**Broken behavior:** the customer is not selected, the form stays empty and the javascript console shows the following error ````Uncaught TypeError: Cannot read property 'label' of undefined```` multiple times.

**Workaround:** only mouse click is affected by the issue, so as a workaround a user can use the keyboard to navigate and select the autocomplete (arrow up/down and enter keys)

**Cause:** the problem comes from a change in jQuery UI that is not exactly compatible with Spree's customer autocomplete. When I upgraded to Spree 1.2.3 / Rails 3.2.10 yesterday, bundler also updated the dependency for jquery-rails:
````diff
- jquery-rails (2.1.3)
+ jquery-rails (2.1.4)
````
The minor version bump actually bumps the version of jQuery UI from 1.8.23 to 1.9.2 (see [list of changes](https://github.com/rails/jquery-rails/compare/v2.1.3...v2.1.4) or this [specific commit](https://github.com/rails/jquery-rails/commit/29d632b9a9aa4a5c76d1d4b0cb10080233d82858)). The autocomplete in jQuery UI got a bit of a refactor and it seems that the click handling is not exactly the same.

The autocomplete click handler looks up the closest element with a class ````.ui-menu-item````. It is expected to be a ````
```` tag (the class is actually added by jQuery on the ````
```` tag containing an autocomplete result item).

Now let's look at the autocomplete in Spree: the [following line](https://github.com/spree/spree/blob/1-2-stable/core/app/assets/javascripts/admin/checkouts/edit.js#L92) is the culprit. Spree autocomplete customize the rendering of each autocomplete result and produces the following markup:
````html

spree@example.com

Billing: xxxxxx
Shipping: xxxxxx

````
The class ````.ui-menu-item```` is added to the ```````` tag inside the ````
````. So if the user is clicking on the ````

````, the closest match becomes the containing ```````` tag instead of the expected ````
```` and the javascript error is triggered causing the customer to not be selected. Same thing happen if clicking on shipping or billing addresses. The only way to get the click working is to click inside the ```````` tag but outside of the child elements.

**Fix:** I did 2 things: first I changed the capybara test case to demonstrate the bug. I made the test case click the ````

```` instead of the the ````````. I also remove the ````mouseenter```` interaction as this triggers the autocomplete selection and hides the bug. Then, I fix the bug by removing the extra ````.ui-menu-item```` class from the ```````` tag.