Skip to main content

Search and Top Navigation

#7639 closed feature (fixed)

Opened August 15, 2011 11:50AM UTC

Closed November 28, 2011 09:35PM UTC

Last modified April 07, 2012 01:08PM UTC

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:
Blocked by: Blocking:
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

Attachments (0)
Change History (18)

Changed August 15, 2011 12:12PM UTC by scottgonzalez comment:1

owner: → meh-cfl
status: newpending

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

Changed August 15, 2011 01:06PM UTC by meh-cfl comment:2

status: pendingnew

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.

Changed August 15, 2011 01:18PM UTC by scottgonzalez comment:3

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.

Changed August 15, 2011 04:13PM UTC by meh-cfl comment:4

Replying to [comment:3 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.

Changed August 15, 2011 04:16PM UTC by scottgonzalez comment:5

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?

Changed August 15, 2011 04:31PM UTC by meh-cfl comment:6

Replying to [comment:5 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.

Changed August 15, 2011 04:59PM UTC by scottgonzalez comment:7

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.

Changed August 16, 2011 08:45AM UTC by meh-cfl comment:8

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

Changed August 21, 2011 02:09AM UTC by ArtemGovorov comment:9

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;

Changed August 23, 2011 08:51PM UTC by meh-cfl comment:10

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.

Changed August 28, 2011 09:24PM UTC by meh-cfl comment:11

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

Changed August 29, 2011 04:56PM UTC by meh-cfl comment:12

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

Changed August 29, 2011 04:58PM UTC by scottgonzalez comment:13

status: newopen
type: bugfeature

Changed October 21, 2011 11:43PM UTC by scottgonzalez comment:14

#7806 is a duplicate of this ticket.

Changed November 28, 2011 09:35PM UTC by meh-cfl comment:15

resolution: → fixed
status: openclosed

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

Changed December 20, 2011 01:23PM UTC by scottgonzalez comment:16

#7963 is a duplicate of this ticket.

Changed April 07, 2012 01:08PM UTC by meh-cfl comment:17

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

Changed April 07, 2012 01:08PM UTC by scottgonzalez comment:18

milestone: 1.91.8.19