Ticket #7639 (closed feature: fixed)

Opened 3 years ago

Last modified 2 years ago

Key up/key down in textarea's should optionally not toggle auto-complete

Reported by: meh-cfl Owned by: meh-cfl
Priority: minor Milestone: 1.8.19
Component: ui.autocomplete Version: 1.8.14
Keywords: Cc:
Blocking: Blocked by:

Description

If you attach the auto-complete plugin to an input field it makes perfect sense to suppress the up/down arrow key actions and use them instead for the auto-complete popup. However if you attach the auto-complete plugin to a text area it prevents you from moving your cursor around the text area with the up/down arrow keys which is annoying.

Steps to reproduce:

  1. Load an HTML document with a <textarea> element with JQuery UI auto-complete attached.
  2. Add a multi-line piece of text to the text area.
  3. Press up arrow/down arrow to navigate around the text in the text area.

Expected: The up/down arrow should allow you to move around the text area if the auto-complete popup isn't currently visible or they should be optionally configurable to do so.

Actual: The up/down arrow work with the auto-complete list instead - even if the auto-complete field isn't currently visible.

Note: Looking at the code on git its an issue there as well.

An example of this is available at:  http://jsbin.com/ujowiq

Change History

comment:1 Changed 3 years ago by scott.gonzalez

  • Owner set to meh-cfl
  • Status changed from new to pending

Do you have an example of how this provides a useful interface?

comment:2 Changed 3 years ago by meh-cfl

  • Status changed from pending to new

In my use case I have users creating comments which are multiple lines and I want to allow them to use the up/down arrow keys to navigate through them if they wish.

I've "fixed" this in my code by taking out the detection of the up/down keypresses from our copy of the jQuery UI library so that they don't scroll through the auto-complete list at all so they then have to use the mouse to select options from the auto-complete list.

Some people might well like the current behaviour with text areas and some people might prefer to scroll through the list only when its already visible to the user - so that's why I think an option - ideally with those two options as well as making it so the arrow keys only scroll through the text area would be great.

If I haven't answered your question please let me know.

comment:3 follow-up: ↓ 4 Changed 3 years ago by scott.gonzalez

You're autocompleting individual words from full sentences? I assume you're building custom logic for this, part of that custom logic can call stopImmediatePropagation() on the keydown event to avoid the autocomplete from handling it. You need to bind this event handler before initializing the autocomplete widget and you should only stop propagation when the menu is closed.

comment:4 in reply to: ↑ 3 Changed 3 years ago by meh-cfl

Replying to scott.gonzalez:

You're autocompleting individual words from full sentences?

No we are auto-completing the full sentence as one unit.

So for example allowing the user to autocomplete 'Needs reviewing by Bill Smith.'.

I assume you're building custom logic for this, part of that custom logic can call stopImmediatePropagation() on the keydown event to avoid the autocomplete from handling it. You need to bind this event handler before initializing the autocomplete widget and you should only stop propagation when the menu is closed.

We aren't building any custom logic on the clientside - we are leaving basically everything (other than the source attribute and the position) as their default auto-complete values.

comment:5 follow-up: ↓ 6 Changed 3 years ago by scott.gonzalez

When the user hasn't typed anything yet, do you want them to be able to see the full list of options by pressing the down arrow?

comment:6 in reply to: ↑ 5 Changed 3 years ago by meh-cfl

Replying to scott.gonzalez:

When the user hasn't typed anything yet, do you want them to be able to see the full list of options by pressing the down arrow?

You guys should decide what makes sense for you in that case.

comment:7 Changed 3 years ago by scott.gonzalez

You're asking for a change in behavior. I'm trying to find out if what you want is actually what you're asking for.

comment:8 Changed 3 years ago by meh-cfl

For our usage we only want the arrow keys to affect the text area and not to affect the popup list.

comment:9 Changed 3 years ago by ArtemGovorov

I have the same issue in a bit different scenario: I'm using textarea with attached autocomplete plugin to provide a sort of intellisense so that autocomplete suggestions are displayed only when entered term ends with certain character(s). So whenever autocomplete suggestions are not displayed I want user to be able to use arrow keys to serve default behaviour of the textarea.

Workaround I'm currently using is modified source code of autocomplete:

                  // code skipped ...
                  .bind( "keydown.autocomplete", function( event ) {
                  // code skipped ...
				case keyCode.UP:
					self._move( "previous", event );
                                        // when menu is open and has focus
					if ( self.menu.active ) {
					    // prevent moving cursor to beginning of text field in some browsers
					    event.preventDefault();
					}
				    break;
				case keyCode.DOWN:
					self._move( "next", event );
                                        // when menu is open and has focus
					if ( self.menu.active ) {
					    // prevent moving cursor to beginning of text field in some browsers
					    event.preventDefault();
					}
					break;

comment:10 Changed 3 years ago by meh-cfl

I've written a partial fix at:  https://github.com/meh-cfl/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js, comments are welcome but I want to test it and hopefully write a unit test before pushing it to the main tree.

comment:11 Changed 3 years ago by meh-cfl

I've added some unit tests for this and created pull request #443:  https://github.com/jquery/jquery-ui/pull/443.

comment:12 Changed 3 years ago by meh-cfl

A second pull request for this:  https://github.com/jquery/jquery-ui/pull/445

comment:13 Changed 3 years ago by scott.gonzalez

  • Status changed from new to open
  • Type changed from bug to feature

comment:14 Changed 3 years ago by scott.gonzalez

#7806 is a duplicate of this ticket.

comment:15 Changed 2 years ago by meh-cfl

  • Status changed from open to closed
  • Resolution set to fixed

Autocomplete: Don't invoke a search from arrow keys when the element can have multi-line text. Fixes #7639 - Key up/key down in textarea's should optionally not toggle auto-complete.

Changeset: 06f6fa8524a905ec8027b8ba756eb199f2591336

comment:16 Changed 2 years ago by scott.gonzalez

#7963 is a duplicate of this ticket.

comment:17 Changed 2 years ago by meh-cfl

Autocomplete: Don't invoke a search from arrow keys when the element can have multi-line text. Fixes #7639 - Key up/key down in textarea's should optionally not toggle auto-complete.

Changeset: 9668cb850ef97e39822cb3ef0d0ea27ff0c1fe6e

comment:18 Changed 2 years ago by scott.gonzalez

  • Milestone changed from 1.9 to 1.8.19
Note: See TracTickets for help on using tickets.