Once the results pop up beneath the text box, users should be able to hit the down arrow (and up arrow) to scroll through the options. Once they pick the one they want, they should be able to hit enter to submit the selected one.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

sagesolutions created an issue. See original summary.

sagesolutions’s picture

Title: Add ability to scroll through the options using the arrow keys » Add ability to highlight option user selects with arrow keys

OK under further review, the user can use the arrows to select the option. However, the UI doesn't show any sort of selected state on the items, so the user has no idea which item they are currently selecting.

drunken monkey’s picture

Title: Add ability to highlight option user selects with arrow keys » Fix highlighting of options when selected with arrow keys
Status: Active » Needs work
FileSize
226.32 KB
715 bytes

Thanks for reporting this problem. #2906450: Fix markup/CSS for autocomplete suggestions doesn't seem to have fixed this, I can still reproduce the buggy behavior. It seems to be a by-product of our nested element structure for the suggestion.
The attached patch is my attempt to fix this. However, at least in my Firefox (56.0.2), when moving the mouse over the options list, all hovered options will be highlighted and remain highlighted. Only selecting with the arrow keys works correctly.
Curiously, it seems like this might be a bug in Firefox, not a problem with our or the jQuery UI Autocomplete widget's code – from the class structure and CSS, the rules shouldn't actually match anymore, and Firefox even shows them greyed out (i.e., "not matching") in the "Inspector" tab. However, it still applied the definitions, as if it hadn't noticed the change in classes. See attached screenshot.

(To be able to test more easily, I replaced the minified autocomplete Javascript with the original and then replaced close() and _close() with no-op functions for testing – which makes the menu stay open when switching to the Firefox Web Dev Tools.)

Would be great if someone with more frontend skills than me could take a look.

drunken monkey’s picture

ressa’s picture

Firefox 56 seems to be the only browser where it doesn't work ... I just tested with these locally and on Browserwatch, and it works in Firefox 57, which will be released on 14. November 2017:

Works fine

  • Windows 10 + IE 11
  • Windows 10 + Firefox 57
  • Mac High Sierra + Safari 11
  • Ubuntu 16.04 + Chromium 62.0.3

Doesn't work

  • Windows 10 + Firefox 56
  • Ubuntu + Firefox 56
drunken monkey’s picture

Category: Feature request » Support request
Status: Needs work » Fixed

Ah, OK, that's great to hear!
Then I'd say we just close this issue? Doesn't seem worth the trouble of coming up with a solution that works with Firefox, too, if they're gonna fix that anyways.
Thanks a lot for your tests!

@ sagesolutions: Can you confirm that you're using Firefox?

sagesolutions’s picture

@drunken monkey, yes I was using Firefox for testing

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

ressa’s picture

I think the patch in #3 might still be needed. I just tested with various browsers and OS'es, and without the patch I am not getting the highlight ...

Good for 23 hours:

Modules:

  • search_api: 8.x-1.5
  • search_api_autocomplete: 8.x-1.x
drunken monkey’s picture

Status: Closed (fixed) » Fixed

Ah, you're right of course, thanks a lot for reminding me!
The Firefox problems I described just prevented the patch from working, but our CSS was broken without it regardless. So, committed the patch.
Thanks again for your input here, everyone!

ressa’s picture

Awesome, arrow keys highlighting now works, thanks for committing!

I do need to change Suggester plugin from Display live results to Retrieve from server, when using the Database Search Defaults module to get suggestions, but that's another issue.

ressa’s picture

I see that a 1.0 stable release is very close.

Would it be worth considering including this patch for the stable release?

drunken monkey’s picture

I see that a 1.0 stable release is very close.

Would it be worth considering including this patch for the stable release?

All patches committed until the stable release is created will be included, so this, too.
However, due to #2912246: Autocomplete/autosuggestions are not language-context sensitive, I'll probably create a second release candidate first (after that issue is resolved, too).

ressa’s picture

Sounds great, thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.