Skip to content

Commit

Permalink
fix(NcActions): Remove on mousemove listener for auto focus elements
Browse files Browse the repository at this point in the history
1. This causes issues with the native datetime picker on Safari as the
   mouse move is also considered outside when hovering a picker popover
   that overlays other actions.
2. In general this is very unexpected behavior, e.g. click on a text
   input, type something, move the mouse and keep typing. You expect to
   write to the same input but the focus is changed to a different while
   typing.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
  • Loading branch information
susnux committed Jan 30, 2025
1 parent 8ad2ac6 commit 1737468
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 27 deletions.
6 changes: 5 additions & 1 deletion src/assets/action.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,15 @@

@mixin action-active {
li.action {
&:hover,
&.active {
background-color: var(--color-background-hover);
border-radius: 6px;
padding: 0;
}

&:hover {
background-color: var(--color-background-hover);
}
}
}

Expand Down
26 changes: 0 additions & 26 deletions src/components/NcActions/NcActions.vue
Original file line number Diff line number Diff line change
Expand Up @@ -1525,31 +1525,6 @@ export default {
getFocusableMenuItemElements() {
return this.$refs.menu.querySelectorAll(focusableSelector)
},
/**
* Focus nearest focusable item on mouse move.
* DO NOT change the focus if the target is already focused
* this will prevent issues with input being unfocused
* on mouse move
* @param {PointerEvent} event - The mouse move event
*/
onMouseFocusAction(event) {
if (document.activeElement === event.target) {
return
}

const menuItem = event.target.closest('li')
if (menuItem && this.$refs.menu.contains(menuItem)) {
const focusableItem = menuItem.querySelector(focusableSelector)
if (focusableItem) {
const focusList = this.getFocusableMenuItemElements()
const focusIndex = [...focusList].indexOf(focusableItem)
if (focusIndex > -1) {
this.focusIndex = focusIndex
this.focusAction()
}
}
}
},
/**
* Dispatches the keydown listener to different handlers
*
Expand Down Expand Up @@ -1969,7 +1944,6 @@ export default {
},
on: {
keydown: this.onKeydown,
mousemove: this.onMouseFocusAction,
},
ref: 'menu',
}, [
Expand Down

0 comments on commit 1737468

Please sign in to comment.