diff --git a/src/components/ListItem/ListItem.vue b/src/components/ListItem/ListItem.vue index 8057c65f9b..f771ed9599 100644 --- a/src/components/ListItem/ListItem.vue +++ b/src/components/ListItem/ListItem.vue @@ -311,16 +311,21 @@ export default { this.displayActions = false }, + /** + * Show actions upon focus + */ handleFocus() { this.focused = true this.showActions() }, - handleBlur(e) { - console.debug(e) + handleBlur() { this.focused = false }, + /** + * Hide the actions on mouseleave unless the menu is open + */ handleMouseleave() { if (!this.menuOpen) { this.displayActions = false @@ -331,7 +336,7 @@ export default { /** * This method checks if the root element of the component is focused and * if that's the case it focuses the actions button if available - * @param {object} e the keydown event + * @param {Event} e the keydown event */ handleTab(e) { if (this.focused && this.hasActions) { @@ -356,11 +361,6 @@ export default { .list-item__wrapper{ position: relative; width: 100%; - .actions { - position: absolute; - top: 4px; - right: 12px; - } } // listItem @@ -443,7 +443,7 @@ export default { font-weight: bold; } - &__subtitle { + &__subtitle { overflow: hidden; flex-grow: 1; padding-right: 4px;