Commit f3d5faf7 authored by Roman Arora's avatar Roman Arora Committed by Josip Sokcevic

Tab Search bug fix - Search field focus to restore item selection

When the search field gains focus, if there are any tab items present
one should be in a selected state

Fixed: 1128616
Change-Id: I5290e7609a03ad2239660dd940bcb79cc30c6663
Reviewed-on: https://chrome-internal-review.googlesource.com/c/chrome/browser/resources/tab_search/+/3272424Reviewed-by: default avatarJohn Lee <johntlee@chromium.org>
Reviewed-by: default avatarTom Lukaszewicz <tluk@chromium.org>
Cr-Commit-Position: refs/heads/master@{#819602}
parent 69d9a0c4
...@@ -55,8 +55,8 @@ ...@@ -55,8 +55,8 @@
</svg> </svg>
</iron-iconset-svg> </iron-iconset-svg>
<tab-search-search-field id="searchField" autofocus clear-label="Clear search" <tab-search-search-field id="searchField" autofocus clear-label="Clear search"
label="Search tabs [[getKeyboardShortcut_()]]" on-keydown="onSearchKeyDown_" label="Search tabs [[getKeyboardShortcut_()]]" on-focus="onSearchFocus_"
on-search-changed="onSearchChanged_"> on-keydown="onSearchKeyDown_" on-search-changed="onSearchChanged_">
</tab-search-search-field> </tab-search-search-field>
<div id="tabs"> <div id="tabs">
<iron-selector id="selector" on-keydown="onItemKeyDown_" <iron-selector id="selector" on-keydown="onItemKeyDown_"
......
...@@ -271,6 +271,14 @@ export class TabSearchAppElement extends PolymerElement { ...@@ -271,6 +271,14 @@ export class TabSearchAppElement extends PolymerElement {
} }
} }
/** @private */
onSearchFocus_() {
if (this.$.selector.selected === undefined &&
this.filteredOpenTabs_.length > 0) {
this.$.selector.selectIndex(0);
}
}
/** /**
* Handles key events when the search field has focus. * Handles key events when the search field has focus.
* @param {!KeyboardEvent} e * @param {!KeyboardEvent} e
......
...@@ -58,6 +58,17 @@ suite('TabSearchAppFocusTest', () => { ...@@ -58,6 +58,17 @@ suite('TabSearchAppFocusTest', () => {
keyDownOn(tabSearchItems[tabSearchItems.length - 1], 0, [], 'Home'); keyDownOn(tabSearchItems[tabSearchItems.length - 1], 0, [], 'Home');
assertEquals(tabSearchItems[0], getDeepActiveElement()); assertEquals(tabSearchItems[0], getDeepActiveElement());
// Once the feedback button is focused, no list item should be selected.
const feedbackButton = /** @type {!HTMLElement} */ (
tabSearchApp.shadowRoot.querySelector('#feedback-footer'));
feedbackButton.focus();
assertEquals(-1, tabSearchApp.getSelectedIndex());
// On restoring focus to the search field, a list item should be selected if
// available.
searchInput.focus();
assertEquals(0, tabSearchApp.getSelectedIndex());
}); });
test('KeyPress', async () => { test('KeyPress', async () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment