TieredMenu: Menu items in are assigned with id attribute with a value of [object Object]

[petarcaspio]

Describe the bug

As per menu-item on the png, code snippet for menu items that is implemented is:

const menuItems: MenuItem[] = () => {
		const items = [];

		items.push({
			template: () => {
				return (
					<div className={classes['profile-menu-header']}>
						<div className={classes['profile-menu-header__full-name']}>
							{profileFirstName} {profileLastName}
						</div>
						<div className={classes['profile-menu-header__email']}>{profileEmail}</div>
						<a href={myProfilePageURL} className={classes['profile-menu-header__manage-profile']}>
							{t(`${ViewsLngNamespace.VIEWS}:MANAGE_PROFILE`)}
						</a>
					</div>
				);
			},
			command: handleExternalLinkClick as (e: MenuItemCommandParams) => void,
		});

		items.push({
			label: t(`${ViewsLngNamespace.VIEWS}:SWITCH_ACCOUNT`),
			items: profileAccountsListItems,
		});

		if (partnersPortalMenuLinkVisible) {
			items.push({
				label: t(`${ViewsLngNamespace.VIEWS}:REFER_AND_EARN`),
				url: partnersPortalMenuLinkUrl,
				command: handleExternalLinkClick as (e: MenuItemCommandParams) => void,
			});
		}

		items.push({
			label: t(`${ViewsLngNamespace.VIEWS}:LOG_OUT`),
			url: uumBridgeLogOutURL,
			command: handleExternalLinkClick as (e: MenuItemCommandParams) => void,
		});

		return items;
},

Also maybe worth attaching involed template functions:

const accountMenuItemTemplate = useCallback(() => {
		return (
			<div className={classes['custom-item']}>
				<ScrollPanel>
					{profileAccounts?.map((item: ProfileAccount) => {
						const isCurrentAcc = item.accountName === accountName;
						return isCurrentAcc ? (
							<div
								className={classNames(
									classes['custom-item-container'],
									classes['custom-item-container__current'],
								)}
							>
								{item.accountFriendlyName}
							</div>
						) : (
							<a className={classes['custom-item-container']} href={item.actionUrl}>
								<div className={classes['custom-item-container__item']}>{item.accountFriendlyName}</div>
							</a>
						);
					})}
				</ScrollPanel>
			</div>
		);
	}, [accountName, profileAccounts]);

	const dashboardMenuItemTemplate = useCallback(() => {
		return (
			<a href={dashboardPageURL} className={classes['account-list-link']}>
				{t(`${ViewsLngNamespace.VIEWS}:OPEN_ACCOUNTS_LIST`)}
			</a>
		);
	}, [dashboardPageURL, t]);

	const profileAccountsListItems: MenuItem[] = useMemo(() => {
		const accountListHeight = profileAccounts?.length
			? profileAccounts.length * ACCOUNT_LIST_ITEM_HEIGHT
			: ACCOUNT_LIST_ITEM_HEIGHT;

		return [
			{
				template: accountMenuItemTemplate,
				style: {
					height: `${accountListHeight}px`,
				},
			},
			{
				template: dashboardMenuItemTemplate,
			},
		];
	}, [accountMenuItemTemplate, dashboardMenuItemTemplate, profileAccounts]);

Reproducer

No response

PrimeReact version

6.5.0

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

It shouldn't automatically add [object Object] id attribute

[melloware]

@petarcaspio have you tested on something newer than PR 6.5.0? PR latest is 8.7.3 and I have a feeling this is already fixed?

[azhigalov]

We are still seeing this while upgrading to PR 9.2.2. This can also be seen in the PrimeReact demo page for the TieredMenu component. Source appears to be a typo where "item" was referenced rather than "item.id" when the li element is being created.

[melloware]

Thanks @azhigalov you are right. PR submitted I looked at other menu's and that is what they do so this was just a mistake.