Make issue meta dropdown support Enter, confirm before reloading (#23014)
As the title. Label/assignee share the same code. * Close #22607 * Close #20727 Also: * partially fix for #21742, now the comment reaction and menu work with keyboard. * partially fix for #17705, in most cases the comment won't be lost. * partially fix for #21539 * partially fix for #20347 * partially fix for #7329 ### The `Enter` support Before, if user presses Enter, the dropdown just disappears and nothing happens or the window reloads. After, Enter can be used to select/deselect labels, and press Esc to hide the dropdown to update the labels (still no way to cancel .... maybe you can do a Cmd+R or F5 to refresh the window to discard the changes .....) This is only a quick patch, the UX is still not perfect, but it's much better than before. ### The `confirm` before reloading And more fixes for the `reload` problem, the new behaviors: * If nothing changes (just show/hide the dropdown), then the page won't be reloaded. * If there are draft comments, show a confirm dialog before reloading, to avoid losing comments. That's the best effect can be done at the moment, unless completely refactor these dropdown related code. Screenshot of the confirm dialog: <details>  </details> --------- Co-authored-by: Brecht Van Lommel <brecht@blender.org> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
parent
1f09051f2b
commit
0bc8bb3cc4
5 changed files with 46 additions and 20 deletions
|
@ -81,7 +81,8 @@ function attachOneDropdownAria($dropdown) {
|
|||
$dropdown.on('keydown', (e) => {
|
||||
// here it must use keydown event before dropdown's keyup handler, otherwise there is no Enter event in our keyup handler
|
||||
if (e.key === 'Enter') {
|
||||
const $item = $dropdown.dropdown('get item', $dropdown.dropdown('get value'));
|
||||
let $item = $dropdown.dropdown('get item', $dropdown.dropdown('get value'));
|
||||
if (!$item) $item = $menu.find('> .item.selected'); // when dropdown filters items by input, there is no "value", so query the "selected" item
|
||||
// if the selected item is clickable, then trigger the click event. in the future there could be a special CSS class for it.
|
||||
if ($item && $item.is('a')) $item[0].click();
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue