Fix d2l-list-item-drag-handle mouse interaction. #4238
Conversation
|
Thanks for the PR! 🎉 We've deployed an automatic preview for this PR - you can see your changes here:
|
| @@ -335,6 +335,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass { | |||
| opacity: 0; | |||
| } | |||
| :host([selected]) d2l-list-item-drag-handle, | |||
| d2l-list-item-drag-handle:hover, | |||
There was a problem hiding this comment.
I almost wonder if the pointer-events: none change in this PR is necessary with this change. I am a little worried about causing a regression on that fix if it's removed however.
| @@ -72,6 +72,7 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(RtlMixin(LitElem | |||
| :host { | |||
| display: flex; | |||
| margin: 0.25rem; | |||
| pointer-events: auto; /* required since its parent may set point-events: none; (see generic layout) */ | |||
There was a problem hiding this comment.
This makes it so d2l-list-item-drag-handle's child d2l-button-move is clickable event though its parent sets pointer-events: none. Unfortunately this CSS could not be placed in the same spot next to it, since ::slotted() does not enable targeting elements deeper than their immediate children.
| @@ -181,25 +182,6 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(RtlMixin(LitElem | |||
| this.activateKeyboardMode(); | |||
| } | |||
|
|
|||
| _onKeyboardButtonFocusIn() { | |||
There was a problem hiding this comment.
I just renamed these handlers for consistency. I vaguely recall not doing it previously in effort to keep a previous PR smaller.
| @@ -274,6 +275,10 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(RtlMixin(LitElem | |||
|
|
|||
| } | |||
|
|
|||
| _onMoveButtonMouseDown(e) { | |||
| e.preventDefault(); | |||
There was a problem hiding this comment.
This is needed to stop Safari from moving focus away from the button when it is clicked due to the frustrating position that Apple has taken.
|
🎉 This PR is included in version 2.160.2 🎉 The release is available on: Your semantic-release bot 📦🚀 |
DE55479
This PR fixes an issue where the
d2l-list-item-drag-handle's up/down arrows are not clickable.These arrows should be clickable with the mouse... but they are no longer. Clicking them causes the drag handle to revert its rendering back to drag mode (the dots icon).
For Chrome and Firefox, this appears to be a regression from this recent change: #4100.
For Safari, there's more - it also suffers from this long-standing terrible issue that Apple refuses to fix, where clicking a button that has focus will actually cause it to lose focus, which in this case, causes the drag-handle to toggle out of the
d2l-button-moveinteraction.