New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clicking item in Prompt with Arrow closes drop down without adding item to input #5

Closed
adamayres opened this Issue Jan 11, 2012 · 9 comments

Comments

Projects
None yet
3 participants
@adamayres
Contributor

adamayres commented Jan 11, 2012

Steps to Reproduce

Expected Results

  • Item is added to the input box

Actual Results

  • Item is not added to the input (however the drop down does close)

Note: If you focus on the input with the mouse, then use the down arrow key to open the drop down menu, and then use the mouse to select an item via click it works as expected

@alexgorbatchev

This comment has been minimized.

Show comment
Hide comment
@alexgorbatchev

alexgorbatchev Jan 11, 2012

Owner

What's the browser and os you are using?

Owner

alexgorbatchev commented Jan 11, 2012

What's the browser and os you are using?

@ghost ghost assigned alexgorbatchev Jan 11, 2012

@adamayres

This comment has been minimized.

Show comment
Hide comment
@adamayres

adamayres Jan 11, 2012

Contributor

I was able to reproduce the issue on Windows 7 using:

Chrome 16
FF 9
IE 9

Contributor

adamayres commented Jan 11, 2012

I was able to reproduce the issue on Windows 7 using:

Chrome 16
FF 9
IE 9

@alexgorbatchev

This comment has been minimized.

Show comment
Hide comment
@alexgorbatchev

alexgorbatchev Jan 12, 2012

Owner

@adamayres I don't have a windows environment. Do you think it's something you could look into?

Owner

alexgorbatchev commented Jan 12, 2012

@adamayres I don't have a windows environment. Do you think it's something you could look into?

@adamayres

This comment has been minimized.

Show comment
Hide comment
@adamayres

adamayres Jan 12, 2012

Contributor

Sure, I can take a look.

Contributor

adamayres commented Jan 12, 2012

Sure, I can take a look.

@jasondavis

This comment has been minimized.

Show comment
Hide comment
@jasondavis

jasondavis Jan 14, 2012

I think this may basically be the same as the issue I started here #2

jasondavis commented Jan 14, 2012

I think this may basically be the same as the issue I started here #2

@adamayres

This comment has been minimized.

Show comment
Hide comment
@adamayres

adamayres Jan 14, 2012

Contributor

Yes, I think you are right, all of these issues appear to be related. I have tracked down the issue and was working through a fix to push back.

Contributor

adamayres commented Jan 14, 2012

Yes, I think you are right, all of these issues appear to be related. I have tracked down the issue and was working through a fix to push back.

@jasondavis

This comment has been minimized.

Show comment
Hide comment
@jasondavis

jasondavis Jan 14, 2012

@adamayres

Here is an image that is more to the point of the problem... You have to click in the area highlighted with red for it to work as expected. So if you click anywhere outside of that red box it will not work, including on the actual text/name of the tag

click area

The ideal solution would allow you to click anywhere in the GREEN highlighted section to add that tag to the input box.
click area

==UPDATE==
Ok I am at a lost, I thought I had it figured out but now it is only working SOMETIMES so it may be more to it then just clicking in the wrong area

jasondavis commented Jan 14, 2012

@adamayres

Here is an image that is more to the point of the problem... You have to click in the area highlighted with red for it to work as expected. So if you click anywhere outside of that red box it will not work, including on the actual text/name of the tag

click area

The ideal solution would allow you to click anywhere in the GREEN highlighted section to add that tag to the input box.
click area

==UPDATE==
Ok I am at a lost, I thought I had it figured out but now it is only working SOMETIMES so it may be more to it then just clicking in the wrong area

@adamayres

This comment has been minimized.

Show comment
Hide comment
@adamayres

adamayres Jan 14, 2012

Contributor

@jasondavis

I think part of the issue is that there is a race condition between the blur event on the input and the click event on the selected row.

There appears to be some consideration for this issue already in textext.plugin.autocomplete.js at line 385-388. If I simply change the timeout to something like 200 ms, things worked for me. However I was not happy with that as a solution.

When the input loses focus from the mousedown event on the row, the blur event handler is closing the autocomplete dropdown before the value is set (since the value will not be set once the dropdown is hidden).

This is also causing the similar issue where in Chrome when using the dropdown scroll bar, the dropdown will close (because in Chrome focus of form fields are lost when clicking scroll buttons).

I was attempting a fix where in the mousedown of the autocomplete I set a data attribute on the container, which could then be used by the blur event to determine if the blur was triggered by a mousedown event from the autocomplete (in which case it would either ignore triggering the close dropdown event or put back the focus in the form input).

I was running into some edge cases with this solution, where if you mousedown inside the dropdown then dragged outside of it and mouseup, then the dropdown could get into a state where it was stuck open (until you chose an item). I was looking into a solution that also put a click handler on the body that would check to see if the coordinates of the event was triggered within the dropdown, if not then close the dropdown. This edge case is caused by this Chrome bug: http://code.google.com/p/chromium/issues/detail?id=31264

Contributor

adamayres commented Jan 14, 2012

@jasondavis

I think part of the issue is that there is a race condition between the blur event on the input and the click event on the selected row.

There appears to be some consideration for this issue already in textext.plugin.autocomplete.js at line 385-388. If I simply change the timeout to something like 200 ms, things worked for me. However I was not happy with that as a solution.

When the input loses focus from the mousedown event on the row, the blur event handler is closing the autocomplete dropdown before the value is set (since the value will not be set once the dropdown is hidden).

This is also causing the similar issue where in Chrome when using the dropdown scroll bar, the dropdown will close (because in Chrome focus of form fields are lost when clicking scroll buttons).

I was attempting a fix where in the mousedown of the autocomplete I set a data attribute on the container, which could then be used by the blur event to determine if the blur was triggered by a mousedown event from the autocomplete (in which case it would either ignore triggering the close dropdown event or put back the focus in the form input).

I was running into some edge cases with this solution, where if you mousedown inside the dropdown then dragged outside of it and mouseup, then the dropdown could get into a state where it was stuck open (until you chose an item). I was looking into a solution that also put a click handler on the body that would check to see if the coordinates of the event was triggered within the dropdown, if not then close the dropdown. This edge case is caused by this Chrome bug: http://code.google.com/p/chromium/issues/detail?id=31264

adamayres added a commit to adamayres/jquery-textext that referenced this issue Jan 16, 2012

Fixes #2 #4 #5 - Capture mousedown event in autocomplete used by the …
…blur event to determine if it was triggered by a scroll click or an item selection, in which case we set focus back to the input instead of closing the autocomplete. Added a click listener to the document body that triggers the autocomplete to close when the click is not within the textext wrap element.

unamashana added a commit to unamashana/jquery-textext that referenced this issue Jan 31, 2012

Fixes #2 #4 #5 - Capture mousedown event in autocomplete used by the …
…blur event to determine if it was triggered by a scroll click or an item selection, in which case we set focus back to the input instead of closing the autocomplete. Added a click listener to the document body that triggers the autocomplete to close when the click is not within the textext wrap element.
@alexgorbatchev

This comment has been minimized.

Show comment
Hide comment
@alexgorbatchev
Owner

alexgorbatchev commented Feb 19, 2012

Merged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment