Menu components: active state remains on outside click
parent
97e00ab465
commit
c05372fa32
|
@ -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);
|
||||
},
|
||||
|
|
|
@ -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;
|
||||
},
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue