NavigationItem onClinck does not work

[roberthuarcaya]

Package name(s)

Core (@salt-ds/core)

Package version(s)

I am using the NavItem Now when I am clicking in one the items the clicking functionality does not work.

Dependencies: "@mds/react": "^12.4.0", "@salt-ds/core": "^1.11.0", "@salt-ds/icons": "^1.7.0", "@salt-ds/lab": "^1.0.0-alpha.20", "@salt-ds/theme": "^1.9.0",

Description

I am using the NavItem Now when I am clicking in one the items the clicking functionality does not work.

Steps to reproduce

Just make a Navegation item add some onClick function. I tried to use a console.log and the idea is that dispte I am clicking on the item the console.log does not display.

My code. Assume that the set function I am passing is a useState to display different outcome depndeing on the value of the state

//import React, { useState } from 'react';

// import { Flexbox , AppHeader, Logo, LogoImage, Tabstrip, Tooltray, Badge, Tab } from "@salt-ds/lab"; // import { Button, Text} from "@salt-ds/core"; //import { FaHome, FaBuilding, FaUniversity, FaUser, FaEnvelope } from 'react-icons/fa'; import {MessageIcon, SearchIcon, UserIcon, FilterIcon, UserGroupIcon, HomeIcon} from "@salt-ds/icons";

import React, {useState} from 'react'; import { Link, useLocation } from 'react-router-dom'; import './../AppNav/AppNav.css'; import logo from '../../LogoUtilities.png'; import {GridItem, GridLayout, StackLayout} from "@salt-ds/core"; import {NavigationItem} from "@salt-ds/core";

const AppNavLogin = ({setShowingTab, user}) => { const tabs = ["Home", "Tutorial and FAQ" ];

//const location = useLocation();

const [active, setActive] = useState(tabs[0]);

//const [selectedTab, handleTabSelection] = useTabSelection(); //remember to include the useTab elements in the return //borderBottom I changed the colours array for a fixed value //I deleted flexbox in the return

return (

<GridLayout columns={8} rows={1} className="app-nav">

  <GridItem colSpan={3} className="r">

    <img src={logo} alt="Logo" />

  </GridItem>

  <GridItem colSpan={2} rowSpan={1} verticalAlignment="center">
    <h1 >Welcome {user.fullName}</h1>
  </GridItem>

  <GridItem colSpan={3} className="r" horizontalAlignment="end">

    <StackLayout
      as="ul"
      direction="row"
      gap={1}
      style={{ listStyle: "none" }}
    >

      <li >
        <NavigationItem
          active={active === tabs[0]}
          href="\"
          onClick={() => {
            setActive(tabs[0]);
            console.log("clicking home");
            setShowingTab("Home");
          }}
        >
          Home
        </NavigationItem>
      </li>

      <li >
        <NavigationItem
          active={active === tabs[1]}

          onClick={() => {
            setActive(tabs[0]);
            console.log("licking FAQ")
            setShowingTab("FAQ");

          }}
        >
          FAQ
        </NavigationItem>
      </li>

    </StackLayout>
  </GridItem>

</GridLayout>

); };

export default AppNavLogin;

Expected behavior

The onClick should tgrigger when we click the item

Operating system

• [ ] macOS
• [X] Windows
• [ ] Linux
• [ ] iOS
• [ ] Android

Browser

• [X] Chrome
• [ ] Safari
• [ ] Firefox
• [ ] Edge

Are you a JPMorgan Chase & Co. employee?

• [X] I am an employee of JPMorgan Chase & Co.

[origami-z]

It's likely due to the missing href on the second item, which makes it an expansion button and you can listen to event via onExpand.

There is additional clean up improvement we can look into, but shouldn't stop you using the component correctly.

[roberthuarcaya]

Thanks using onExpand solve the problem. I do not want to go to another website. I wanted to show a different part of the website when the user clicks on each tab. Thanks