Menu components: active state remains on outside click

active-menu
tugcekucukoglu 2024-06-25 11:55:56 +03:00
parent 97e00ab465
commit c05372fa32
5 changed files with 23 additions and 8 deletions

View File

@ -50,6 +50,7 @@
@keydown="onKeyDown"
@item-click="onItemClick"
@item-mouseenter="onItemMouseEnter"
@item-mousemove="onItemMouseMove"
/>
<div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')">
<slot name="end"></slot>
@ -184,8 +185,8 @@ export default {
this.$emit('focus', event);
},
onBlur(event) {
this.focused = false;
this.focusedItemInfo = { index: -1, key: '', parentKey: '' };
// this.focused = false;
// this.focusedItemInfo = { index: -1, key: '', parentKey: '' };
this.searchValue = '';
this.dirty = false;
this.$emit('blur', event);
@ -289,7 +290,12 @@ export default {
if (grouped) {
this.onItemChange(event);
} else {
const rootProcessedItem = root ? processedItem : this.activeItem;
this.hide(originalEvent);
this.changeFocusedItemInfo(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1);
!this.mobile && DomHandler.focus(this.menubar);
}
}
},
@ -298,6 +304,11 @@ export default {
this.onItemChange(event);
}
},
onItemMouseMove(event) {
if (this.focused) {
this.changeFocusedItemIndex(event, event.processedItem.index);
}
},
menuButtonClick(event) {
this.toggle(event);
},

View File

@ -56,6 +56,7 @@
:unstyled="unstyled"
@item-click="$emit('item-click', $event)"
@item-mouseenter="$emit('item-mouseenter', $event)"
@item-mousemove="$emit('item-mousemove', $event)"
/>
</div>
</div>
@ -85,7 +86,7 @@ export default {
name: 'MegaMenuSub',
hostName: 'MegaMenu',
extends: BaseComponent,
emits: ['item-click', 'item-mouseenter'],
emits: ['item-click', 'item-mouseenter', 'item-mousemove'],
props: {
menuId: {
type: String,
@ -180,6 +181,9 @@ export default {
onItemMouseEnter(event, processedItem) {
this.$emit('item-mouseenter', { originalEvent: event, processedItem });
},
onItemMouseMove(event, processedItem) {
this.$emit('item-mousemove', { originalEvent: event, processedItem });
},
getAriaSetSize() {
return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;
},

View File

@ -309,7 +309,7 @@ export default {
if (this.overlayVisible && isOutsideContainer && isOutsideTarget) {
this.hide();
} else if (!this.popup && isOutsideContainer && isOutsideTarget) {
this.focusedOptionIndex = -1;
// this.focusedOptionIndex = -1;
}
};

View File

@ -178,8 +178,8 @@ export default {
this.$emit('focus', event);
},
onBlur(event) {
this.focused = false;
this.focusedItemInfo = { index: -1, level: 0, parentKey: '' };
// this.focused = false;
// this.focusedItemInfo = { index: -1, level: 0, parentKey: '' };
this.searchValue = '';
this.dirty = false;
this.$emit('blur', event);

View File

@ -165,8 +165,8 @@ export default {
this.$emit('focus', event);
},
onBlur(event) {
this.focused = false;
this.focusedItemInfo = { index: -1, level: 0, parentKey: '' };
// this.focused = false;
// this.focusedItemInfo = { index: -1, level: 0, parentKey: '' };
this.searchValue = '';
this.dirty = false;
this.$emit('blur', event);