feat(select): allow focusing items by typing #2907

crisbeto · 2017-02-02T21:12:21Z

Allows for users to skip to a select item by typing, similar to the native select.

Fixes #2668.

Jagpreet16 · 2017-04-13T16:57:21Z

By when can we expect this feature to be available?

RenatoSilveiraGomes · 2017-05-20T17:58:52Z

Can we expect this feature available on 2.0.0-beta.6?

otienoanyango · 2017-06-12T19:32:02Z

Does this mean we should be hopeful for next beta?

Stas-tolpekin · 2017-06-22T08:00:49Z

@kara,
When can we expect this function?

RBroden · 2017-06-24T11:39:27Z

I got asked to create a select like this, as well. The select they compared it to was the angularjs ui-select select with search. So far, I am using a read-only input that displays a dropdown, non-input element on click (using a directive to handle clicks outside the container). That element has a search input and list. The search input filters the data and sets the read-only input upon clicking on a list item.

Markus-ipse · 2017-06-28T09:16:23Z

@crisbeto Any chance you have time to rebase this PR so that it can be merged? :)

anthonyartese · 2017-07-24T19:10:28Z

What is the status of this? Just encountered this issue when implementing md-select.

mikeomeara1 · 2017-07-26T06:16:47Z

Without this functionality, md-select doesn't work how an html select is expected to and it's confusing/counter-intuitive to users (not to mention a real pain when you get more than a couple of items in there). Please please...oh please can we get some love on this one? Sounds like it's fixed and ready to go yes?

kemmis · 2017-08-02T13:10:43Z

Can we please please please have this feature? I agree that without this functionality it is a show-stopper from using the md-select control. What is needed in order to get this merged? Thanks!

ocarreterom · 2017-08-02T20:06:41Z

src/lib/core/a11y/focus-key-manager.ts

+          let item = items[i];
+
+          // Note that fromCharCode returns uppercase letters.
+          if (items[i].getFocusableLabel!().toUpperCase().trim().startsWith(inputString)) {


Replace items[i] by item or remove the var instance.

jelbourn · 2017-08-02T19:04:48Z

src/lib/core/a11y/focus-key-manager.ts

+/**
+ * Time in ms to wait after the last keypress to focus the active item.
+ */
+export const FOCUS_KEY_MANAGER_DEBOUNCE_INTERVAL = 200;


I sent a question off internally to see if there's a well-defined time for this (since the WAI guide just says "rapid succession")

jelbourn · 2017-08-02T19:08:08Z

src/lib/core/a11y/focus-key-manager.ts


  constructor(items: QueryList<Focusable>) {
    super(items);
+    this._hasLabelFn = items && items.first && 'getFocusableLabel' in items.first;


Using the string 'getFocusableLabel' won't work for minifiers that do property renaming (e.g. Closure Compiler).

(just realized we do this in a couple of places throughout the lib; we should change those)

It's been a while since I did this. Revisiting it, it makes sense to require the getFocusableLabel as a part of the Focusable interface.

jelbourn · 2017-08-02T19:12:10Z

src/lib/core/keyboard/keycodes.ts

@@ -29,3 +29,6 @@ export const TAB = 9;
 export const ESCAPE = 27;
 export const BACKSPACE = 8;
 export const DELETE = 46;
+
+export const INPUT_KEY_RANGE_START = 65;
+export const INPUT_KEY_RANGE_END = 90;


Can we just make these A and Z?
(I'm basing my preference on being used to https://github.com/google/closure-library/blob/master/closure/goog/events/keycodes.js#L37)

jelbourn · 2017-08-02T20:19:02Z

src/lib/core/a11y/focus-key-manager.ts

+  }
+
+  /** Debounces the input key events and focuses the proper item after the last keystroke. */
+  private _debounceInputEvent(keyCode: number): void {


Could we do this with rxjs' debounce?

crisbeto · 2017-08-06T12:08:11Z

@jelbourn re-did this one to move all of the logic into the ListKeyManager, get it working with the latest master, address the feedback and clean it up in general. Can you take another look?

Allows for users to skip to a select item by typing, similar to the native select. Fixes angular#2668.

jelbourn · 2017-08-07T18:22:04Z

src/cdk/a11y/list-key-manager.ts

-  private _tabOut = new Subject<void>();
-  private _wrap: boolean = false;
+  private _wrap = false;
+  private _pressedInputKeys: number[] = [];


Add description for _pressedInputKeys? This one isn't as immediately obvious as the other properties

jelbourn · 2017-08-07T18:23:57Z

src/cdk/a11y/list-key-manager.ts

+      this._typeaheadSubscription.unsubscribe();
+    }
+
+    this._typeaheadSubscription = RxChain.from(this._nonNavigationKeyStream)


Would be good to add a description of how you're using _pressedInputKeys in this chain

jelbourn · 2017-08-07T18:26:09Z

src/cdk/a11y/list-key-manager.ts

+      .call(filter, () => this._pressedInputKeys.length > 0)
+      .call(map, () => String.fromCharCode(...this._pressedInputKeys))
+      .subscribe(inputString => {
+        const activeItemIndex = this._items.toArray().findIndex(item => {


IE11 doesn't have findIndex or startsWith

It gets added by core-js, we have a couple of other places where we use startsWith.

jelbourn · 2017-08-07T18:29:47Z

src/cdk/a11y/list-key-manager.ts

+      .call(filter, () => this._pressedInputKeys.length > 0)
+      .call(map, () => String.fromCharCode(...this._pressedInputKeys))
+      .subscribe(inputString => {
+        const activeItemIndex = this._items.toArray().findIndex(item => {


activeItemIndex -> matchedItemIndex?

jelbourn · 2017-08-07T18:30:23Z

src/cdk/a11y/list-key-manager.ts

 */
-export interface CanDisable {
+export interface ListKeyManagerItem {


Maybe Item -> Option? I think every time we use this it's for the listbox + option combo

jelbourn · 2017-08-07T18:33:48Z

src/cdk/a11y/list-key-manager.ts

-        return;
+      case DOWN_ARROW: this.setNextItemActive(); break;
+      case UP_ARROW: this.setPreviousItemActive(); break;
+      default: this._nonNavigationKeyStream.next(event.keyCode); return;


Add back comment about using return here to skip preventDefault?

jelbourn · 2017-08-07T18:35:28Z

src/lib/core/a11y/focus-key-manager.ts

 */
-export interface Focusable extends CanDisable {
+export interface Focusable extends ListKeyManagerItem {


Maybe make this something like FocusableOption now?

jelbourn · 2017-08-07T18:36:07Z

src/lib/core/option/option.ts

@@ -174,6 +174,11 @@ export class MdOption {
    }
  }

+  /** Fetches the label to be used when determining whether the option should be focused. */


"Fetches" -> "Gets", since "fetch" implies a server call

jelbourn · 2017-08-07T18:58:35Z

src/cdk/a11y/list-key-manager.ts

+  withTypeAhead(debounceInterval = 200): this {
+    if (this._items.length && this._items.some(item => typeof item.getLabel !== 'function')) {
+      throw Error('ListKeyManager items in typeahead mode must implement the `getLabel` method.');
+    }


Add test for this error?

crisbeto · 2017-08-07T20:53:14Z

Addressed the feedback @jelbourn, can you take another look?

jelbourn

LGTM

naveedahmed1 · 2017-08-08T21:32:33Z

Thank you so much team, awesome work! It was much needed :)

This is something that came up in angular#2907 (comment). We shouldn't be using the `if ('someString' in obj)` checks, because they can be broken by minifiers that rename class members.

This is something that came up in #2907 (comment). We shouldn't be using the `if ('someString' in obj)` checks, because they can be broken by minifiers that rename class members.

andrewbents · 2017-08-18T07:23:05Z

src/cdk/a11y/list-key-manager.ts

+    // and convert those letters back into a string. Afterwards find the first item that starts
+    // with that string and select it.
+    this._typeaheadSubscription = RxChain.from(this._nonNavigationKeyStream)
+      .call(filter, keyCode => keyCode >= A && keyCode <= Z)


so, it only searches by letters? What if options contain other characters? Also, a lot of languages have more letters, so some of them don't fit in the A-Z range

This checks the keyboard codes, not the actual letters. E.g. 68 will correspond to d in English and д in a Bulgarian phonetic keyboard. As for the languages with more letters, nothing has come up yet, but we can always update the range. This seems to be what Closure uses as well.

Russian has 6 letters outside this range, they are on [ ] ; ' , . keys. So, they won't be handled? Also I think non-alphabetic characters should be supported as well

What about numbers? Does it work with numeric values? And when should we expect it to be release?

I've submitted #6543 that should handle more or less everything. It'll still fall back to A-Z and 0-9 for browsers that don't support KeyboardEvent.key (should be a very small percentage).

…cters As per the discussion on angular#2907 (comment), the current typeahead setup won't cover the cases where the user is typing in an alphabet that has more characters than English. These changes update the check so that it catches any typed character (including non-alphanumeric characters).

wags1999 · 2017-08-24T18:45:29Z

Any idea when this will be in a release? Our users are complaining, so we're considering ripping out md-select and using a different library's control... but if a release is imminent we'd just wait for that...

naveedahmed1 · 2017-09-22T10:03:29Z

Should this work with latest release (2.0.0-beta.11)? Somehow, its still not working for me.

PCASME · 2017-10-02T12:57:10Z

I'm in version 2.0.0-beta.11 and does not work.

k-krupka · 2017-11-29T15:23:50Z

do we have a working example of this somewhere?

mmalerba · 2017-11-29T17:06:22Z

@xagon https://material.angular.io/components/select/examples

naveedahmed1 · 2017-12-07T15:03:38Z

Please also add support for:

Home key - Which should take to the first item of the list
End Key - which should take to the last item of the list

kylekrzeski · 2017-12-18T15:28:53Z

+1 When is this expected to be released?

benb7760 · 2017-12-18T15:32:18Z

@kylekrzeski two months ago in 2.0.0-beta.10

angular-automatic-lock-bot · 2019-09-07T23:02:20Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Feb 2, 2017

crisbeto assigned kara Feb 2, 2017

crisbeto added the pr: needs review label Feb 2, 2017

crisbeto force-pushed the 2668/select-typing-focus branch from 4712994 to 81c090f Compare February 4, 2017 17:00

crisbeto mentioned this pull request Mar 5, 2017

mdSelect - Option search #3447

Closed

crisbeto mentioned this pull request Mar 14, 2017

md-select not reacting to keyboard input #3592

Closed

crisbeto force-pushed the 2668/select-typing-focus branch from 81c090f to a7ab227 Compare March 16, 2017 21:02

TomsonNgassa approved these changes May 5, 2017

View reviewed changes

crisbeto added the Accessibility This issue is related to accessibility (a11y) label May 20, 2017

crisbeto force-pushed the 2668/select-typing-focus branch from a7ab227 to 425223a Compare June 28, 2017 17:33

crisbeto assigned jelbourn Aug 2, 2017

ocarreterom reviewed Aug 2, 2017

View reviewed changes

jelbourn reviewed Aug 2, 2017

View reviewed changes

crisbeto force-pushed the 2668/select-typing-focus branch from 425223a to 9a788c3 Compare August 6, 2017 12:06

crisbeto requested review from devversion and kara as code owners August 6, 2017 12:06

feat(select): allow focusing items by typing

72e245d

Allows for users to skip to a select item by typing, similar to the native select. Fixes angular#2668.

crisbeto force-pushed the 2668/select-typing-focus branch from 9a788c3 to 72e245d Compare August 6, 2017 12:15

jelbourn reviewed Aug 7, 2017

View reviewed changes

refactor: address feedback

5d40226

crisbeto requested a review from tinayuangao as a code owner August 7, 2017 20:52

jelbourn approved these changes Aug 7, 2017

View reviewed changes

jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker and removed pr: needs review labels Aug 7, 2017

chore: linting errors

49fecc1

mmalerba merged commit 5ebca5e into angular:master Aug 8, 2017

crisbeto mentioned this pull request Aug 12, 2017

refactor: remove usages of if in checks #6436

Merged

andrewbents reviewed Aug 18, 2017

View reviewed changes

crisbeto mentioned this pull request Aug 18, 2017

fix(list-key-manager): increase typeahead range to include more characters #6543

Merged

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019

feat(select): allow focusing items by typing #2907

feat(select): allow focusing items by typing #2907

Conversation

crisbeto commented Feb 2, 2017 • edited Loading

Jagpreet16 commented Apr 13, 2017

RenatoSilveiraGomes commented May 20, 2017

otienoanyango commented Jun 12, 2017

Stas-tolpekin commented Jun 22, 2017

RBroden commented Jun 24, 2017

Markus-ipse commented Jun 28, 2017

anthonyartese commented Jul 24, 2017

mikeomeara1 commented Jul 26, 2017

kemmis commented Aug 2, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

crisbeto commented Aug 6, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

crisbeto commented Aug 7, 2017

jelbourn left a comment

Choose a reason for hiding this comment

naveedahmed1 commented Aug 8, 2017

andrewbents Aug 18, 2017 • edited Loading

Choose a reason for hiding this comment

crisbeto Aug 18, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wags1999 commented Aug 24, 2017

naveedahmed1 commented Sep 22, 2017

PCASME commented Oct 2, 2017

k-krupka commented Nov 29, 2017

mmalerba commented Nov 29, 2017

naveedahmed1 commented Dec 7, 2017

kylekrzeski commented Dec 18, 2017

benb7760 commented Dec 18, 2017

angular-automatic-lock-bot bot commented Sep 7, 2019

crisbeto commented Feb 2, 2017 •

edited

Loading

andrewbents Aug 18, 2017 •

edited

Loading

crisbeto Aug 18, 2017 •

edited

Loading