Skip to content

Commit

Permalink
Fix #5699: MegaMenu strict mode fix (#5700)
Browse files Browse the repository at this point in the history
  • Loading branch information
melloware authored Jan 7, 2024
1 parent 0dbf8f0 commit b6aee40
Showing 1 changed file with 85 additions and 83 deletions.
168 changes: 85 additions & 83 deletions components/lib/megamenu/MegaMenu.js
Original file line number Diff line number Diff line change
Expand Up @@ -233,14 +233,6 @@ export const MegaMenu = React.memo(
}
};

useUpdateEffect(() => {
if (mobileActiveState) {
bindListeners();
} else {
unbindListeners();
}
}, [mobileActiveState]);

const isOutsideClicked = (event) => {
return elementRef.current && !(elementRef.current.isSameNode(event.target) || elementRef.current.contains(event.target) || (menuButtonRef.current && menuButtonRef.current.contains(event.target)));
};
Expand All @@ -260,6 +252,90 @@ export const MegaMenu = React.memo(
}
});

useUpdateEffect(() => {
if (attributeSelectorState && elementRef.current) {
elementRef.current.setAttribute(attributeSelectorState, '');
createStyle();
}

return () => {
destroyStyle();
};
}, [attributeSelectorState, props.breakpoint]);

useUpdateEffect(() => {
if (mobileActiveState) {
bindListeners();
} else {
unbindListeners();
}
}, [mobileActiveState]);

useUpdateEffect(() => {
if (focusTrigger) {
const itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : findFirstFocusedItemIndex();

changeFocusedItemInfo(itemIndex);
setFocusTrigger(false);
}
}, [focusTrigger]);

useUpdateEffect(() => {
const currentPanel = DomHandler.findSingle(elementRef.current, '.p-menuitem-active > .p-megamenu-panel');

if (activeItemState) {
bindListeners();

if (!isMobileMode) {
ZIndexUtils.set('menu', currentPanel, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['menu']) || PrimeReact.zIndex['menu']);
}
} else {
unbindListeners();
}

if (isMobileMode) {
currentPanel && currentPanel.previousElementSibling.scrollIntoView({ block: 'nearest', inline: 'nearest' });
}

return () => {
unbindListeners();
ZIndexUtils.clear(currentPanel);
};
}, [activeItemState, isMobileMode]);

useUpdateEffect(() => {
const _focusedItemId = ObjectUtils.isNotEmpty(focusedItemInfo.key) ? `${idState}_${focusedItemInfo.key}` : null;

setFocusedItemId(_focusedItemId);
}, [focusedItemInfo]);

React.useEffect(() => {
const itemsToProcess = props.model || [];
const processed = createProcessedItems(itemsToProcess, 0, null, '');

setProcessedItems(processed);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.model]);

useUpdateEffect(() => {
const processedItem = ObjectUtils.isNotEmpty(activeItemState) ? activeItemState : null;

const _visibleItems =
processedItem && processedItem.key === focusedItemInfo.parentKey
? processedItem.items.reduce((items, col) => {
col.forEach((submenu) => {
submenu.items.forEach((a) => {
items.push(a);
});
});

return items;
}, [])
: processedItems;

setVisibleItems(_visibleItems);
}, [focusedItemInfo, activeItemState, processedItems]);

const onFocus = (event) => {
setFocused(true);

Expand Down Expand Up @@ -329,6 +405,7 @@ export const MegaMenu = React.memo(
case 'PageUp':
case 'Backspace':
case 'ShiftLeft':
focusedItemInfo;
case 'ShiftRight':
//NOOP
break;
Expand All @@ -342,15 +419,6 @@ export const MegaMenu = React.memo(
}
};

useUpdateEffect(() => {
if (focusTrigger) {
const itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : findFirstFocusedItemIndex();

changeFocusedItemInfo(itemIndex);
setFocusTrigger(false);
}
}, [focusTrigger]);

const onArrowDownKey = (event) => {
event.preventDefault();

Expand Down Expand Up @@ -670,61 +738,6 @@ export const MegaMenu = React.memo(
return index - props.model.slice(0, index).filter((processedItem) => isItemVisible(processedItem) && getItemProp(processedItem, 'separator')).length + 1;
};

useUpdateEffect(() => {
const currentPanel = DomHandler.findSingle(elementRef.current, '.p-menuitem-active > .p-megamenu-panel');

if (activeItemState) {
bindListeners();

if (!isMobileMode) {
ZIndexUtils.set('menu', currentPanel, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex['menu']) || PrimeReact.zIndex['menu']);
}
} else {
unbindListeners();
}

if (isMobileMode) {
currentPanel && currentPanel.previousElementSibling.scrollIntoView({ block: 'nearest', inline: 'nearest' });
}

return () => {
unbindListeners();
ZIndexUtils.clear(currentPanel);
};
}, [activeItemState]);

useUpdateEffect(() => {
const _focusedItemId = ObjectUtils.isNotEmpty(focusedItemInfo.key) ? `${idState}_${focusedItemInfo.key}` : null;

setFocusedItemId(_focusedItemId);
}, [focusedItemInfo]);

useUpdateEffect(() => {
const itemsToProcess = props.model || [];
const processed = createProcessedItems(itemsToProcess, 0, null, '');

setProcessedItems(processed);
}, [props.model]);

useUpdateEffect(() => {
const processedItem = ObjectUtils.isNotEmpty(activeItemState) ? activeItemState : null;

const _visibleItems =
processedItem && processedItem.key === focusedItemInfo.parentKey
? processedItem.items.reduce((items, col) => {
col.forEach((submenu) => {
submenu.items.forEach((a) => {
items.push(a);
});
});

return items;
}, [])
: processedItems;

setVisibleItems(_visibleItems);
}, [focusedItemInfo, activeItemState, processedItems]);

const createProcessedItems = (items, level = 0, parent = {}, parentKey = '', columnIndex) => {
const _processedItems = [];

Expand Down Expand Up @@ -1088,17 +1101,6 @@ export const MegaMenu = React.memo(
styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
};

useUpdateEffect(() => {
if (attributeSelectorState && elementRef.current) {
elementRef.current.setAttribute(attributeSelectorState, '');
createStyle();
}

return () => {
destroyStyle();
};
}, [attributeSelectorState, props.breakpoint]);

const createCategory = (processedItem, index) => {
const category = processedItem.item;
const iconProps = mergeProps(
Expand Down

0 comments on commit b6aee40

Please sign in to comment.