Suggestions frozen open after detach

[pfiaux]

I've run into an odd case where my suggestion options open and freeze that after the field detaches.

Details:

• I'm using the promise option for suggest
• I have multiple auto complete fields in a row on the same form
• It's an edit form so sometimes the inputs already have a full valid value in them

What happens:
If i start one field above the auto completes and tab through each of them:

• tab into autocomplete field1
• field1 attach fires
  • No dialog shows, i don't edit the text or anything.
• tab into autocomplete field2
• field1 detach fires
• field1 suggest function is called and promise resolves
• field1 autocomplete shows all the available options
• field2 attach fires
• tab into autocomplete field3
• field2 detach fires
• field2 suggest function is called and promise resolves
• field2 autocomplete shows all the available options
• field3 attach fires
• tab into non auto complete next field
• field3 detach fires
• field3 suggest function is called and promise resolves
• field3 autocomplete shows all the available options

At that point i can click any where the dialogs stay open. If i click on any of the open suggested options i get a console error TypeError: Cannot read property '0' of undefined from line 203 current_element[0].focus(); probably because the dom is showing but the controller is already detached.

If i tab/focus them again they attach, then once they detach again the dialog closes and the problem doesn't happen again. It seems to only happen on the first pass through.

on_detach doesn't pass me any thing or I can't call anything that I could use to clean up the suggested options right?

[pfiaux]

I've narrowed down the issue a bit _suggest (called via suggest) is trigged by the value_watch which gets called before that.detach. So by the time detach is called we've already scheduled the suggestion call.

Now this has something to do with the watch expression it seems when the page load the watch has no reference value so it goes from undefined to it's current value and considers it a change. Subsequent changes only trigger the watch if the expression is actually different.

So when the watch gets called the first time (no selection has been made) last_selected_value is undefined and since I already have an init value on line 113 it's not true so it goes through with the suggestion:

if (nv === last_selected_value)

Changing it to check for ov if last_selected_value is undefined seems to solve the problem:

if (angular.isDefined(last_selected_value) && nv === last_selected_value || nv === ov)

I'm still able to select and use the other options, didn't see any side effects so far.

[hakib]

Hey @pfiaux, Thanks for opening the issue.

I wonder if the suggestion is addressing the symptom rather then the issue. How is it that after losing focus from a field and (presumably) executing detach the suggestion box is still visible ?

Can you post a jsbin with your setup ?

Thanks, Haki.

[pfiaux]

Hey, thanks for the reply!
I'll try to make a jsbin next week, I wont have time today. Also i was wrong my code with the nv === ov ends up not opening the dialog when it should.
The problem is that the box becomes visible after detaching, from what i debugged it happens this way:

• value_watch gets called
• that.detach gets called
• debounced suggest from value_watch calls _suggest
• the dialog gets added then

I noticed that when this happens current_element is undefined. So i added

if (angular.isUndefined(current_element)) {
 return;
}

to the top of _suggest and it seems to handle it much better. To avoid _suggest being called It looks like detach would have to cancel the debounce time out to suggest, but i don't think the object is stored and available to detach?

[pfiaux]

Here's a jsbin that should show the problem: http://jsbin.com/qerawukini/1 I tested it in chrome and had the same problem as on the site i'm developing.