gr-dropdown: Bring back default behaviour for focus ring
We also bring back default behaviour for the focus ring. It's only triggered
with the keyboard now. Not clicking.
Disables focus ring animations as well.
Release-Notes: skip
Change-Id: Ib0a4e69bbb6ffb04aa3b134a534b627f5a1a0077
diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.ts b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.ts
index b48cd96..a8b62cc 100644
--- a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.ts
+++ b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.ts
@@ -72,6 +72,7 @@
--md-menu-container-color: var(--dropdown-background-color);
--md-menu-top-space: 0px;
--md-menu-bottom-space: 0px;
+ --md-focus-ring-duration: 0s;
}
gr-button {
vertical-align: top;
@@ -206,7 +207,6 @@
this.cursor.setCursorAtIndex(0);
if (this.cursor.target !== null) {
this.cursor.target.focus();
- this.handleAddSelected();
}
this.setUpGlobalEventListeners();
} else {
@@ -379,18 +379,14 @@
* Handle the up key.
*/
private handleUp() {
- this.handleRemoveSelected();
this.cursor.previous();
- this.handleAddSelected();
}
/**
* Handle the down key.
*/
private handleDown() {
- this.handleRemoveSelected();
this.cursor.next();
- this.handleAddSelected();
}
/**
@@ -402,7 +398,6 @@
if (this.cursor.target !== null) {
const el = this.cursor.target.shadowRoot?.querySelector(':not([hidden])');
if (el) {
- this.handleRemoveSelected();
(el as HTMLElement).click();
}
}
@@ -516,28 +511,4 @@
);
}
}
-
- private handleRemoveSelected() {
- // We workaround an issue to allow cursor to work.
- // For some reason without this, it doesn't work half the time.
- // E.g. you press enter or you close the dropdown, reopen it,
- // you expect it to be focused with the first item selected.
- // The below fixes it. It's an ugly hack but works for now.
- const mdFocusRing = this.cursor.target?.shadowRoot
- ?.querySelector('md-item')
- ?.querySelector('md-focus-ring');
- if (mdFocusRing) mdFocusRing.visible = false;
- }
-
- private handleAddSelected() {
- // We workaround an issue to allow cursor to work.
- // For some reason without this, it doesn't work half the time.
- // E.g. you press enter or you close the dropdown, reopen it,
- // you expect it to be focused with the first item selected.
- // The below fixes it. It's an ugly hack but works for now.
- const mdFocusRing = this.cursor.target?.shadowRoot
- ?.querySelector('md-item')
- ?.querySelector('md-focus-ring');
- if (mdFocusRing) mdFocusRing.visible = true;
- }
}
