WordPress.org

Make WordPress Core

Opened 9 months ago

Last modified 5 months ago

#38211 assigned defect (bug)

Interference of AJAX search with input field auto-complete

Reported by: armandsdz Owned by: adamsilverstein
Milestone: Future Release Priority: normal
Severity: normal Version: 4.6
Component: Plugins Keywords: ux-feedback uniform-search has-patch needs-testing
Focuses: ui, accessibility Cc:

Description

In WordPress 4.6 new feature was introduced in "Add Plugin" page - user input in "Search Plugin" field triggers AJAX search. That's great but it also makes browser's auto-complete of this field to disappear (at least in Chrome).
Therefore it's difficult to select an already existing option of plugin name that browser's auto-complete offers because AJAX search gets triggered very soon after you type a letter in input field.
So, in most cases I need to type full name of the plugin or try to select auto-complete option before AJAX gets triggered.

I'm not sure what the solution for this would be but I don't think it's difficult to press Enter or tap Search button after you have written everything you wanted without system interfering with the process without user wanting it.
In addition, the fact that button Search disappeared some time ago made it impossible to add a plugin on touch devices. I see that AJAX search perhaps tries to fix this but it breaks auto-complete as I mention above.

Attachments (3)

38211.diff (995 bytes) - added by adamsilverstein 9 months ago.
Add autocomplete="off" to the new plugin search (ajax) field
38211.2.diff (1.9 KB) - added by adamsilverstein 6 months ago.
38211.3.diff (2.2 KB) - added by adamsilverstein 5 months ago.

Download all attachments as: .zip

Change History (23)

#1 @armandsdz
9 months ago

  • Keywords ux-feedback added

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


9 months ago

#3 @afercia
9 months ago

  • Milestone changed from Awaiting Review to Future Release

Right, I guess this is the reason why other, similar inputs used for "live searches" have an autocomplete="off" attribute. Definitely something to have a look into.

#4 @afercia
9 months ago

  • Keywords uniform-search added

Related: #31818

@adamsilverstein
9 months ago

Add autocomplete="off" to the new plugin search (ajax) field

#5 @adamsilverstein
9 months ago

In 38211.diff I added the autocomplete="off" property we have on other ajaxified search fields. @armandsdz I'm not sure this really helps your issue because with this patch you are left without autocomplete; what it does solve is the conflicted interaction between autocomplete and ajax search. Can you review/test to see if you find this helpful?

#6 @mklusak
9 months ago

Oh yes, this feature drives me crazy! Searching for my favourite plugins became irritating experience - I start typing name of plugin, browser shows autocomplete list of older inputs, I hit down arrow to select the desired, ... aaaaand search is triggered. I would love to deactivate this awesome search feature, but can't find anything.

#7 @afercia
9 months ago

See also related: ticket:37233#comment:21

ideally it should trigger after 2 ASCII chars or one high UTF-8 char. We can standardize this for all similar cases in core, there are at least 6-7 other places.

#8 @johnbillion
8 months ago

#38516 was marked as a duplicate.

#9 @johnbillion
8 months ago

  • Keywords has-patch needs-testing added

#10 @afercia
6 months ago

#39450 was marked as a duplicate.

#11 @adamsilverstein
6 months ago

38211.2.diff

  • Add autocomplete="off" to plugin list table search field which is also ajaxified

#12 follow-up: @finalwebsites
6 months ago

It would help if the live-search feature would start searching after entering 3 or more characters. Or better give the user an option to enter a number of minimum chars.
The problem is not the autocomplete feature, the live-search starts to fast (after entering a single character)

#13 in reply to: ↑ 12 @armandsdz
6 months ago

Great observation!
That is probably the thing that is annoying - that everything starts to move and search as soon as you enter the first character.
In addition, when I enter, for example, "w", it starts the search and return no results.
If search would be triggered after three or so characters, user would have a chance to choose something from auto-complete list if desired. Or just finish typing what's intended.

In essence, at this point this ajax search is not fast and not unobtrusive enough to be ok that it gets triggered so early.

Replying to finalwebsites:

It would help if the live-search feature would start searching after entering 3 or more characters. Or better give the user an option to enter a number of minimum chars.
The problem is not the autocomplete feature, the live-search starts to fast (after entering a single character)

#14 follow-up: @adamsilverstein
5 months ago

I agree, we should delay starting the search until the user has typed two or three letters. We do that elsewhere and we should match that logic here. I still think autocomplete should be disabled for the field because ajax search and autocomlete will still visually interfere with each other once the ajax search kicks in.

#15 in reply to: ↑ 14 ; follow-ups: @finalwebsites
5 months ago

Replying to adamsilverstein:

I still think autocomplete should be disabled for the field because ajax search and autocomlete will still visually interfere with each other once the ajax search kicks in.

You can keep the autocomplete function because the form element doesn't show any ajax content. So it wouldn't interfere and it will help the user who is installing plugins for multiple websites.

#16 in reply to: ↑ 15 @mklusak
5 months ago

Replying to finalwebsites:

You can keep the autocomplete function because the form element doesn't show any ajax content. So it wouldn't interfere and it will help the user who is installing plugins for multiple websites.

I agree! For me the autocomplete function on that field is much more important than the ajax search.

#17 in reply to: ↑ 15 ; follow-up: @adamsilverstein
5 months ago

You can keep the autocomplete function because the form element doesn't show any ajax content. So it wouldn't interfere and it will help the user who is installing plugins for multiple websites.

Do you mean until the user types 3 characters and the ajax results fire?

#18 follow-up: @adamsilverstein
5 months ago

  • Owner set to adamsilverstein
  • Status changed from new to assigned

38211.3.diff Is an alternate approach that limits searching until you type at least 2 characters, and dynamically removes the autocomplete attribute before the ajax search kicks in. We use a similar approach in nav-menus.js.

This gives you one character to type in and see/select autocomplete results, once you hit 2 characters, the ajax search kicks in and autocomplete has been disabled for the field. You can override the threshold by setting wp.updates.searchMinCharacters after the JS loads.

@mklusak & @finalwebsites & @armandsdz can you test this out and see what you think?

  • add a new variable developers can adjust, defaults to 2: wp.updates.searchMinCharacters = 2;
  • leave autocomplete enabled for search field until user types searchMinCharacters - 1 (right before ajax search kicks in)
  • only perform ajax search when searchMinCharacters reached. also re-search on empty field so if suer clears field results are reset
Last edited 5 months ago by adamsilverstein (previous) (diff)

#19 in reply to: ↑ 17 @finalwebsites
5 months ago

Replying to adamsilverstein:

You can keep the autocomplete function because the form element doesn't show any ajax content. So it wouldn't interfere and it will help the user who is installing plugins for multiple websites.

Do you mean until the user types 3 characters and the ajax results fire?

I think you can keep autocomplete anyway. The ajax result becomes visible on a complete different place. The search field doesn't have any Ajax function. That's why you need to change it.

#20 in reply to: ↑ 18 @finalwebsites
5 months ago

Replying to adamsilverstein:

38211.3.diff Is an alternate approach that limits searching until you type at least 2 characters, and dynamically removes the autocomplete attribute before the ajax search kicks in. We use a similar approach in nav-menus.js.

This gives you one character to type in and see/select autocomplete results, once you hit 2 characters, the ajax search kicks in and autocomplete has been disabled for the field. You can override the threshold by setting wp.updates.searchMinCharacters after the JS loads.

@mklusak & @finalwebsites & @armandsdz can you test this out and see what you think?

  • add a new variable developers can adjust, defaults to 2: wp.updates.searchMinCharacters = 2;
  • leave autocomplete enabled for search field until user types searchMinCharacters - 1 (right before ajax search kicks in)
  • only perform ajax search when searchMinCharacters reached. also re-search on empty field so if suer clears field results are reset

I tried this patch but the live search is still searching after I entered the first character. It takes a second now before something happens. In my opinion the code is missing that limits the search for the searchMinCharacters var.

Note: See TracTickets for help on using tickets.