Fix text selection in dropdown list items Explicitly enables text selection within dropdown menu items and prevents the menu from automatically closing when attempting to highlight text. The keep-open attribute detaches native auto-close behavior, while the click handler intercepts text selection. Google-Bug-Id: b/483219058 Release-Notes: skip Change-Id: I5b87693cf1910c9ee0d991dd86bf4e7cba5f6c8e
diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.ts b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.ts index 4eaf3a8..4e65b99 100644 --- a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.ts +++ b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.ts
@@ -138,6 +138,10 @@ --md-divider-color: var(--border-color); } md-menu-item { + -moz-user-select: text; + -ms-user-select: text; + -webkit-user-select: text; + user-select: text; max-height: 70vh; min-width: 266px; --md-sys-color-on-surface: var( @@ -368,10 +372,16 @@ private renderMdMenuItem(item: DropdownItem, index: number) { return html` <md-menu-item + keep-open ?selected=${this.value === String(item.value)} ?active=${this.value === String(item.value)} ?disabled=${!!item.disabled} - @click=${() => { + @click=${(e: Event) => { + if (document.getSelection()?.toString().length !== 0) { + e.preventDefault(); + e.stopPropagation(); + return; + } this.value = String(item.value); }} @keydown=${(e: KeyboardEvent) => { @@ -483,6 +493,9 @@ */ private handleDropdownClick() { assertIsDefined(this.dropdown); + if (document.getSelection()?.toString().length !== 0) { + return; + } this.dropdown.close(); }
diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list_test.ts b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list_test.ts index 6b888ff..5fb5ffc 100644 --- a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list_test.ts +++ b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list_test.ts
@@ -81,7 +81,7 @@ quick="" tabindex="-1" > - <md-menu-item md-menu-item="" tabindex="0"> + <md-menu-item keep-open="" md-menu-item="" tabindex="0"> <div class="topContent"> <div> <span class="desktopText"> @@ -93,7 +93,7 @@ </div> </md-menu-item> <md-divider role="separator" tabindex="-1"> </md-divider> - <md-menu-item active="" md-menu-item="" selected="" tabindex="-1"> + <md-menu-item active="" keep-open="" md-menu-item="" selected="" tabindex="-1"> <div class="topContent"> <div> <span class="desktopText"> @@ -107,7 +107,7 @@ </div> </md-menu-item> <md-divider role="separator" tabindex="-1"> </md-divider> - <md-menu-item disabled="" md-menu-item="" tabindex="-1"> + <md-menu-item disabled="" keep-open="" md-menu-item="" tabindex="-1"> <div class="topContent"> <div> <span class="desktopText">