chrome-devtools-frontend 1.0.937244 → 1.0.939066

package/front_end/third_party/puppeteer/package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "puppeteer",
-  "version": "10.4.0",
+  "version": "11.0.0",
   "description": "A high-level API to control headless Chrome over the DevTools Protocol",
   "main": "./cjs-entry.js",
   "types": "lib/types.d.ts",
@@ -17,7 +17,7 @@
     "assert-unit-coverage": "cross-env COVERAGE=1 mocha --config mocha-config/coverage-tests.js",
     "funit": "cross-env PUPPETEER_PRODUCT=firefox npm run unit",
     "test": "npm run tsc && npm run lint --silent && npm run unit-with-coverage && npm run test-browser",
-    "prepare": "node typescript-if-required.js",
+    "prepare": "node typescript-if-required.js && husky install",
     "prepublishOnly": "npm run build",
     "dev-install": "npm run tsc && node install.js",
     "install": "node install.js",
@@ -58,67 +58,60 @@
   "author": "The Chromium Authors",
   "license": "Apache-2.0",
   "dependencies": {
-    "debug": "4.3.1",
+    "debug": "4.3.2",
     "devtools-protocol": "0.0.901419",
     "extract-zip": "2.0.1",
     "https-proxy-agent": "5.0.0",
-    "node-fetch": "2.6.1",
+    "node-fetch": "2.6.5",
     "pkg-dir": "4.2.0",
-    "progress": "2.0.1",
+    "progress": "2.0.3",
     "proxy-from-env": "1.1.0",
     "rimraf": "3.0.2",
-    "tar-fs": "2.0.0",
-    "unbzip2-stream": "1.3.3",
-    "ws": "7.4.6"
+    "tar-fs": "2.1.1",
+    "unbzip2-stream": "1.4.3",
+    "ws": "8.2.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "11.0.0",
-    "@commitlint/config-conventional": "11.0.0",
-    "@microsoft/api-documenter": "7.13.8",
-    "@microsoft/api-extractor": "7.15.1",
-    "@types/debug": "0.0.31",
+    "@commitlint/cli": "13.2.0",
+    "@commitlint/config-conventional": "13.2.0",
+    "@microsoft/api-documenter": "7.13.65",
+    "@microsoft/api-extractor": "7.18.15",
+    "@types/debug": "4.1.7",
     "@types/mime": "2.0.3",
-    "@types/mocha": "7.0.2",
-    "@types/node": "14.14.45",
+    "@types/mocha": "9.0.0",
+    "@types/node": "16.10.9",
     "@types/proxy-from-env": "1.0.1",
-    "@types/rimraf": "2.0.2",
-    "@types/sinon": "9.0.11",
-    "@types/tar-fs": "1.16.2",
-    "@types/ws": "7.4.4",
+    "@types/rimraf": "3.0.2",
+    "@types/sinon": "10.0.4",
+    "@types/tar-fs": "2.0.1",
+    "@types/ws": "8.2.0",
     "@typescript-eslint/eslint-plugin": "4.23.0",
-    "@typescript-eslint/parser": "4.23.0",
-    "@web/test-runner": "0.12.20",
+    "@typescript-eslint/parser": "4.33.0",
+    "@web/test-runner": "0.13.18",
     "commonmark": "0.29.3",
     "cross-env": "7.0.3",
-    "eslint": "7.26.0",
+    "eslint": "7.32.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-mocha": "8.1.0",
-    "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-unicorn": "22.0.0",
-    "esprima": "4.0.0",
+    "eslint-plugin-mocha": "9.0.0",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-unicorn": "37.0.1",
+    "esprima": "4.0.1",
     "expect": "25.2.7",
-    "husky": "4.3.8",
+    "husky": "7.0.2",
     "jpeg-js": "0.3.7",
     "mime": "2.5.2",
     "minimist": "1.2.0",
-    "mocha": "8.4.0",
+    "mocha": "9.1.3",
     "ncp": "2.0.0",
-    "pixelmatch": "4.0.2",
-    "pngjs": "5.0.0",
+    "pixelmatch": "5.2.1",
+    "pngjs": "6.0.0",
     "prettier": "2.3.0",
     "sinon": "9.2.4",
     "source-map-support": "0.5.19",
-    "standard-version": "9.3.0",
+    "standard-version": "9.3.2",
     "text-diff": "1.0.1",
-    "ts-node": "9.1.1",
-    "typescript": "4.2.4"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run eslint",
-      "commit-msg": "commitlint --env HUSKY_GIT_PARAMS",
-      "pre-push": "npm run tsc && npm run eslint && npm run doc && npm run ensure-pinned-deps"
-    }
+    "ts-node": "10.4.0",
+    "typescript": "4.4.4"
   }
 }

package/front_end/ui/components/adorners/adorner.css

@@ -33,7 +33,7 @@ slot {
   border-color: var(--override-adorner-focus-border-color, var(--color-primary));
 }
 
-:host([aria-pressed=true]) slot {
+:host([aria-pressed="true"]) slot {
   color: var(--override-adorner-active-text-color, var(--color-background));
   background-color: var(--override-adorner-active-background-color, var(--color-primary));
   border: 1px solid var(--override-adorner-active-background-color, var(--color-primary));

package/front_end/ui/components/data_grid/DataGrid.ts

@@ -729,6 +729,7 @@ export class DataGrid extends HTMLElement {
                 const cellIsFocusableCell = anyColumnsSortable && columnIndex === tabbableCell[0] && tabbableCell[1] === 0;
 
                 return LitHtml.html`<th class=${thClasses}
+                  style=${LitHtml.Directives.ifDefined(col.styles ? LitHtml.Directives.styleMap(col.styles) : undefined)}
                   data-grid-header-cell=${col.id}
                   @focus=${(): void => {
                     this.focusCellIfRequired([columnIndex, 0]);
@@ -749,7 +750,7 @@ export class DataGrid extends HTMLElement {
                   data-row-index='0'
                   data-col-index=${columnIndex}
                   tabindex=${LitHtml.Directives.ifDefined(anyColumnsSortable ? (cellIsFocusableCell ? '0' : '-1') : undefined)}
-                >${col.title}</th>`;
+                >${col.titleElement || col.title}</th>`;
               })}
             </tr>
           </thead>
@@ -790,6 +791,7 @@ export class DataGrid extends HTMLElement {
                   const cellOutput = col.visible ? renderCellValue(cell) : null;
                   return LitHtml.html`<td
                     class=${cellClasses}
+                    style=${LitHtml.Directives.ifDefined(col.styles ? LitHtml.Directives.styleMap(col.styles) : undefined)}
                     tabindex=${cellIsFocusableCell ? '0' : '-1'}
                     aria-colindex=${columnIndex + 1}
                     title=${cell.title || String(cell.value).substr(0, 20)}

package/front_end/ui/components/data_grid/DataGridUtils.ts

@@ -6,6 +6,10 @@ import type * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as DataGridRenderers from './DataGridRenderers.js';
 import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 
+export interface CSSStylesObject {
+  readonly [name: string]: string;
+}
+
 /**
   * A column is an object with the following properties:
   *
@@ -19,14 +23,17 @@ import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
   *   Note, if you're rendering a data-grid yourself you likely  shouldn't set
   *   this. It's set by the `data-grid-controller`, which is the component you
   *   want if your table needs to be sortable.
+  * - `styles`: an optional property of key-value sets of CSS properties and values.
 */
 export interface Column {
   id: string;
   title: string;
+  titleElement?: LitHtml.TemplateResult;
   sortable?: boolean;
   widthWeighting: number;
   hideable: boolean;
   visible: boolean;
+  styles?: CSSStylesObject;
 }
 
 export type CellValue = string|number|boolean|IconButton.Icon.Icon|null;
@@ -56,14 +63,10 @@ export function getStringifiedCellValues(cells: Cell[]): string {
       .toLowerCase();
 }
 
-export interface RowCSSStylesObject {
-  readonly [name: string]: string;
-}
-
 export type Row = {
   cells: Cell[],
   hidden?: boolean,
-  styles?: RowCSSStylesObject,
+  styles?: CSSStylesObject,
 };
 
 export const enum SortDirection {

package/front_end/ui/components/data_grid/dataGrid.css

@@ -106,11 +106,6 @@ th.firstVisibleColumn {
   padding: 0;
 }
 
-tr td:nth-child(1),
-tr th:nth-child(1) {
-  text-align: center;
-}
-
 .filler-row.empty-table td {
   /* If the table is empty and we have no renderable rows, the filler row cell
    * needs to have some form of padding to make it have some height, else it

package/front_end/ui/components/expandable_list/expandableList.css

@@ -17,7 +17,7 @@ div {
 
 .arrow-icon {
   display: inline-block;
-  -webkit-mask-image: url(Images/treeoutlineTriangles.svg);
+  -webkit-mask-image: url("Images/treeoutlineTriangles.svg");
   -webkit-mask-size: 32px 24px;
   -webkit-mask-position: 0 0;
   background-color: var(--color-text-primary);

package/front_end/ui/components/icon_button/iconButton.css

@@ -61,6 +61,7 @@
     background-color: ButtonFace;
   }
 
+  .icon-button:focus-visible,
   .icon-button.with-click-handler:hover {
     background-color: Highlight;
     color: HighlightText;

package/front_end/ui/components/linear_memory_inspector/valueInterpreterDisplay.css

@@ -17,8 +17,7 @@
   width: 100%;
   display: grid;
   grid-template-columns: auto auto 1fr;
-  grid-column-gap: 24px;
-  grid-row-gap: 4px;
+  gap: 4px 24px;
   min-height: 24px;
   overflow: hidden;
   padding: 2px 12px;

package/front_end/ui/components/linear_memory_inspector/valueInterpreterSettings.css

@@ -13,7 +13,7 @@
 .settings {
   display: flex;
   flex-wrap: wrap;
-  margin: 0 12px 12px 12px;
+  margin: 0 12px 12px;
   column-gap: 45px;
   row-gap: 15px;
 }

package/front_end/ui/components/report_view/reportKey.css

@@ -6,7 +6,7 @@
 
 :host {
   line-height: 28px;
-  margin: 0 0 8px 0;
+  margin: 0 0 8px;
 }
 
 .key {

package/front_end/ui/components/report_view/reportValue.css

@@ -6,7 +6,7 @@
 
 :host {
   line-height: 28px;
-  margin: 0 0 8px 0;
+  margin: 0 0 8px;
   min-width: 150px;
 }
 

package/front_end/ui/components/settings/settingCheckbox.css

@@ -27,5 +27,5 @@ p {
 
 /* Preserve look of legacy checkboxes in dark mode */
 :host-context(.-theme-with-dark-background) input[type="checkbox"]:not(.-theme-preserve) {
-  filter: invert(80%);
+  accent-color: var(--color-checkbox-accent-color);
 }

package/front_end/ui/legacy/ContextMenu.ts

@@ -137,8 +137,11 @@ export class Section {
     this.items = [];
   }
 
-  appendItem(label: string, handler: () => void, disabled?: boolean): Item {
+  appendItem(label: string, handler: () => void, disabled?: boolean, additionalElement?: Element): Item {
     const item = new Item(this.contextMenu, 'item', label, disabled);
+    if (additionalElement) {
+      item.customElement = additionalElement;
+    }
     this.items.push(item);
     if (this.contextMenu) {
       this.contextMenu.setHandler(item.id(), handler);
@@ -147,7 +150,7 @@ export class Section {
   }
 
   appendCustomItem(element: Element): Item {
-    const item = new Item(this.contextMenu, 'item', '<custom>');
+    const item = new Item(this.contextMenu, 'item');
     item.customElement = element;
     this.items.push(item);
     return item;
@@ -331,6 +334,7 @@ export class SubMenu extends Item {
 
 export interface ContextMenuOptions {
   useSoftMenu?: boolean;
+  onSoftMenuClosed?: () => void;
   x?: number;
   y?: number;
 }
@@ -344,6 +348,7 @@ export class ContextMenu extends SubMenu {
   private readonly useSoftMenu: boolean;
   private x: number;
   private y: number;
+  private onSoftMenuClosed?: () => void;
   private readonly handlers: Map<number, () => void>;
   idInternal: number;
   private softMenu?: SoftContextMenu;
@@ -360,6 +365,7 @@ export class ContextMenu extends SubMenu {
     this.useSoftMenu = Boolean(options.useSoftMenu);
     this.x = options.x === undefined ? mouseEvent.x : options.x;
     this.y = options.y === undefined ? mouseEvent.y : options.y;
+    this.onSoftMenuClosed = options.onSoftMenuClosed;
     this.handlers = new Map();
     this.idInternal = 0;
 
@@ -431,7 +437,8 @@ export class ContextMenu extends SubMenu {
     const ownerDocument = (eventTarget as HTMLElement).ownerDocument;
     if (this.useSoftMenu || ContextMenu.useSoftMenu ||
         Host.InspectorFrontendHost.InspectorFrontendHostInstance.isHostedMode()) {
-      this.softMenu = new SoftContextMenu((menuObject as SoftContextMenuDescriptor[]), this.itemSelected.bind(this));
+      this.softMenu = new SoftContextMenu(
+          (menuObject as SoftContextMenuDescriptor[]), this.itemSelected.bind(this), undefined, this.onSoftMenuClosed);
       this.softMenu.show((ownerDocument as Document), new AnchorBox(this.x, this.y, 0, 0));
     } else {
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.showContextMenuAtPoint(

package/front_end/ui/legacy/ListWidget.ts

@@ -283,10 +283,8 @@ export class Editor<T> {
     const buttonsRow = this.element.createChild('div', 'editor-buttons');
     this.commitButton = createTextButton('', this.commitClicked.bind(this), '', true /* primary */);
     buttonsRow.appendChild(this.commitButton);
-    this.cancelButton = createTextButton(
-        i18nString(UIStrings.cancelString), this.cancelClicked.bind(this), '', true /* primary */, 'mousedown');
-    this.cancelButton.addEventListener(
-        'keydown', onKeyDown.bind(null, event => event.key === 'Enter', this.cancelClicked.bind(this)), false);
+    this.cancelButton =
+        createTextButton(i18nString(UIStrings.cancelString), this.cancelClicked.bind(this), '', true /* primary */);
     buttonsRow.appendChild(this.cancelButton);
 
     this.errorMessageContainer = this.element.createChild('div', 'list-widget-input-validation-error');

package/front_end/ui/legacy/SoftContextMenu.ts

@@ -77,15 +77,18 @@ export class SoftContextMenu {
   private hideOnUserGesture?: ((event: Event) => void);
   private activeSubMenuElement?: HTMLElement;
   private subMenu?: SoftContextMenu;
+  private onMenuClosed?: () => void;
 
   constructor(
-      items: SoftContextMenuDescriptor[], itemSelectedCallback: (arg0: number) => void, parentMenu?: SoftContextMenu) {
+      items: SoftContextMenuDescriptor[], itemSelectedCallback: (arg0: number) => void, parentMenu?: SoftContextMenu,
+      onMenuClosed?: () => void) {
     this.items = items;
     this.itemSelectedCallback = itemSelectedCallback;
     this.parentMenu = parentMenu;
     this.highlightedMenuItemElement = null;
 
     this.detailsForElementMap = new WeakMap();
+    this.onMenuClosed = onMenuClosed;
   }
 
   show(document: Document, anchorBox: AnchorBox): void {
@@ -165,6 +168,7 @@ export class SoftContextMenu {
         delete this.parentMenu.activeSubMenuElement;
       }
     }
+    this.onMenuClosed?.();
   }
 
   private createMenuItem(item: SoftContextMenuDescriptor): HTMLElement {
@@ -193,7 +197,7 @@ export class SoftContextMenu {
       subMenuTimer: undefined,
     };
 
-    if (item.element) {
+    if (item.element && !item.label) {
       const wrapper = menuItemElement.createChild('div', 'soft-context-menu-custom-item');
       wrapper.appendChild(item.element);
       detailsForElement.customElement = (item.element as HTMLElement);
@@ -205,6 +209,9 @@ export class SoftContextMenu {
       menuItemElement.classList.add('soft-context-menu-disabled');
     }
     createTextChild(menuItemElement, item.label || '');
+    if (item.element) {
+      menuItemElement.appendChild(item.element);
+    }
     menuItemElement.createChild('span', 'soft-context-menu-shortcut').textContent = item.shortcut || '';
 
     menuItemElement.addEventListener('mousedown', this.menuItemMouseDown.bind(this), false);

package/front_end/ui/legacy/XLink.ts

@@ -5,6 +5,7 @@
 import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as ComponentHelpers from '../components/helpers/helpers.js';
+import * as LitHtml from '../lit-html/lit-html.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
 import type {ContextMenu, Provider} from './ContextMenu.js';
@@ -14,9 +15,6 @@ import {addReferrerToURLIfNecessary, copyLinkAddressLabel, MaxLengthForDisplayed
 import {XElement} from './XElement.js';
 
 export class XLink extends XElement {
-  tabIndex: number;
-  target: string;
-  rel: string;
   hrefInternal: string|null;
   private clickable: boolean;
   private readonly onClick: (arg0: Event) => void;
@@ -40,9 +38,9 @@ export class XLink extends XElement {
 
     this.style.setProperty('display', 'inline');
     ARIAUtils.markAsLink(this);
-    this.tabIndex = 0;
-    this.target = '_blank';
-    this.rel = 'noopener';
+    this.setAttribute('tabindex', '0');
+    this.setAttribute('target', '_blank');
+    this.setAttribute('rel', 'noopener');
 
     this.hrefInternal = null;
     this.clickable = true;
@@ -152,3 +150,5 @@ export class ContextMenuProvider implements Provider {
 }
 
 ComponentHelpers.CustomElements.defineComponent('x-link', XLink);
+
+export const sample = LitHtml.html`<p>Hello, <x-link>world!</x-link></p>`;

package/front_end/ui/legacy/checkboxTextLabel.css

@@ -44,7 +44,7 @@ input.dt-checkbox-themed {
 }
 
 input.dt-checkbox-themed::after {
-  content: '';
+  content: "";
   line-height: 10px;
   position: absolute;
   cursor: pointer;
@@ -61,7 +61,7 @@ input.dt-checkbox-themed:checked::after {
 }
 
 :host-context(.-theme-with-dark-background) input:not(.dt-checkbox-themed) {
-  filter: invert(80%);
+  accent-color: var(--color-checkbox-accent-color);
 }
 
 .dt-checkbox-text {

package/front_end/ui/legacy/components/color_picker/spectrum.css

@@ -242,26 +242,26 @@
   user-select: text;
 }
 
-.contrast-details-value [is=ui-icon] {
+.contrast-details-value [is="ui-icon"] {
   display: none;
   margin-left: 5px;
   background-color: var(--color-text-primary);
 }
 
-.spectrum-contrast-details .toolbar-state-on [is=ui-icon] {
+.spectrum-contrast-details .toolbar-state-on [is="ui-icon"] {
   background-color: var(--color-text-secondary);
 }
 
-[is=ui-icon].smallicon-no {
+[is="ui-icon"].smallicon-no {
   background-color: var(--color-accent-red);
 }
 
-.contrast-pass-fail span[is=ui-icon] {
+.contrast-pass-fail span[is="ui-icon"] {
   margin-left: 5px;
 }
 
-[is=ui-icon].smallicon-checkmark-square,
-[is=ui-icon].smallicon-checkmark-behind {
+[is="ui-icon"].smallicon-checkmark-square,
+[is="ui-icon"].smallicon-checkmark-behind {
   background-color: var(--color-accent-green);
 }
 
@@ -328,7 +328,7 @@
   background-color: var(--color-background-inverted-opacity-50);
 }
 
-[is=ui-icon].icon-mask.copy-color-icon {
+[is="ui-icon"].icon-mask.copy-color-icon {
   background-color: var(--color-background);
 }
 
@@ -461,7 +461,7 @@
 }
 
 .palette-color-shades > .spectrum-palette-color {
-  margin: 8px 0 0 0;
+  margin: 8px 0 0;
   margin-left: 8px;
   width: 12px;
 }
@@ -644,7 +644,7 @@ div.palette-preview {
   padding-bottom: 2px;
 }
 
-.swatch.contrast [is=ui-icon] {
+.swatch.contrast [is="ui-icon"] {
   margin: -2px;
 }
 

package/front_end/ui/legacy/components/data_grid/dataGrid.css

@@ -292,7 +292,7 @@
 }
 
 @media (forced-colors: active) {
-  .sort-order-icon-container [is=ui-icon].icon-mask,
+  .sort-order-icon-container [is="ui-icon"].icon-mask,
   .data-grid td.disclosure::before {
     forced-color-adjust: none;
     background-color: ButtonText;
@@ -303,7 +303,7 @@
   }
 
   .data-grid th.sortable:hover *,
-  .data-grid th.sortable:hover .sort-order-icon-container [is=ui-icon].icon-mask,
+  .data-grid th.sortable:hover .sort-order-icon-container [is="ui-icon"].icon-mask,
   .data-grid tr.parent.selected td.disclosure::before,
   .data-grid:focus tr.parent.selected td.disclosure::before,
   .data-grid table.data tr.parent.revealed:hover td.disclosure::before {

package/front_end/ui/legacy/components/inline_editor/cssAngleEditor.css

@@ -5,7 +5,7 @@
  */
 
 .editor.interacting::before {
-  content: '';
+  content: "";
   position: fixed;
   inset: 0;
 }
@@ -42,7 +42,7 @@
   width: 0;
   height: 0;
   border-style: solid;
-  border-width: 0 0.9em 0.9em 0.9em;
+  border-width: 0 0.9em 0.9em;
   border-color: transparent transparent var(--color-background-elevation-1) transparent;
 }
 
@@ -76,7 +76,7 @@
 }
 
 .hand::before {
-  content: '';
+  content: "";
   display: inline-block;
   position: absolute;
   top: -0.6em;

package/front_end/ui/legacy/components/inline_editor/cssLength.css

@@ -33,7 +33,7 @@
   -webkit-mask-size: 19px 6px;
   -webkit-mask-repeat: no-repeat;
   background-color: var(--color-text-primary);
-  content: '';
+  content: "";
   height: 1em;
   width: 1em;
 }

package/front_end/ui/legacy/components/inline_editor/cssShadowEditor.css

@@ -6,7 +6,7 @@
 
 :host {
   user-select: none;
-  padding: 4px 12px 12px 12px;
+  padding: 4px 12px 12px;
   border: 1px solid transparent;
 }
 

package/front_end/ui/legacy/components/inline_editor/fontEditor.css

@@ -6,7 +6,7 @@
 
 :host {
   user-select: none;
-  padding: 4px 12px 12px 12px;
+  padding: 4px 12px 12px;
 }
 
 .error-input {

package/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css

@@ -9,7 +9,7 @@
 }
 
 .object-properties-section {
-  padding: 0 0 0 0;
+  padding: 0;
   color: var(--color-text-primary);
   display: flex;
   flex-direction: column;
@@ -25,7 +25,7 @@
 
 .object-properties-section li.editing-sub-part {
   padding: 3px 12px 8px 6px;
-  margin: -1px -6px -8px -6px;
+  margin: -1px -6px -8px;
   text-overflow: clip;
 }
 

package/front_end/ui/legacy/components/perf_ui/module.json

@@ -1,8 +1,6 @@
 {
   "dependencies": [
-    "ui/legacy",
-    "ui/legacy/components/source_frame",
-    "ui/legacy/components/text_editor"
+    "ui/legacy"
   ],
     "resources": [
     "chartViewport.css",

package/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

@@ -334,14 +334,20 @@ export class FilteredListWidget extends Common.ObjectWrapper.eventMixin<EventTyp
         break;
       }
     }
-    if (!completion) {
-      return false;
+    // If there is an auto-completion, press 'tab' first time will show the auto-completion, second time will rewrite
+    // the query. Otherwise it will select the next item.
+    if (completion) {
+      const selection = this.inputBoxElement.getComponentSelection();
+      if (selection && selection.toString().trim() !== '') {
+        this.setQuery(completion);
+        return true;
+      }
+      this.inputBoxElement.focus();
+      this.inputBoxElement.setText(completion);
+      this.setQuerySelectedRange(userEnteredText.length, completion.length);
+      return true;
     }
-    this.inputBoxElement.focus();
-    this.inputBoxElement.setText(completion);
-    this.inputBoxElement.setSelectedRange(userEnteredText.length, completion.length);
-    this.scheduleFilter();
-    return true;
+    return this.list.selectNextItem(true, false);
   }
 
   private itemsFilteredForTest(): void {