Tab Navigation always active

web
mobile

Topic: Tab Navigation always active

Christian Aichner pro premium asked a week ago

Describe the bug

All navigation links of all MDBNav pills are active, no matter the active prop given to MDBNavLink

Setup

My code:

<MDBNav pills color="primary" className="flex-column">
{this.props.settings.map((setting, key) => {
    return(
        <MDBNavItem key={key}>
            <MDBNavLink 
            to="#" 
            active={this.state.activeItemInnerPills === key} 
            onClick={this.toggleOuterPills(key)}
            className="text-left"
            >
            <MDBIcon icon={setting.icon} className="mr-2" /> {setting.title}
            </MDBNavLink>
        </MDBNavItem>
    )
})}
</MDBNav>

Regarding to this code, the class active should only be given, if this.state.activeItemInnerPills === key - which works perfectly fine.

A quick console.log confirms this:

enter image description here

However, the tab looks like this:

enter image description here

As you can see, every tab is active.

Taking a look at the HTML, the following sight worries me:

enter image description here

It looks like every navigation button is already active, and the active param only adds one additional active.

Expected behavior

Only the active item should have a class active.

Additional information

You can find the entire code on GitHub.

Checking MDB code for bug

I have no idea about the origin of this problem. According to the NavLink.js file in our GitLab, there should be no problem:

const { children, className, disabled, active, to, ...attributes } = props;
  const classes = classNames(
    'nav-link',
    disabled ? 'disabled' : 'Ripple-parent',
    active && 'active',
    className
  );

Therefore, "active" should only be a class, if the parameter active is true.

Cheers, Chris


Jakub Chmura staff premium answered a week ago

Hi,

Thank you for your feedback and for finding the bug!

Your problem description will make it much easier for us to work on repairing nav component.

We will try to fix this as soon as possible.

Best regards.

Kuba


Pavel Isel Pérez Pupo pro premium commented a week ago

Hi, in the meanwhile how do i solve this, i paid for this, it wasn't free, so "as soon as possible" is not enough when there is money in the middle so i need a exact date and time


Jakub Chmura staff premium commented 7 days ago

hi @Pavel Isel Pérez Pupo

We apologize for the inconvenience, we do everything in our power to release the solution as soon as possible. Best regards,

Kuba


Christian Aichner pro premium commented 7 days ago

A temporary fix would be to remove all active classes using JavaScript, and then setting the active manually. This can be achieved by using React DOM References (like Ref={this.tab1}) and then removing all classes using removeAttribute("class") on this reference. Then setting the previous classes + active if used.

Best regards, Chris


Christian Aichner pro premium commented 7 days ago

@Jakub Chmura you already know the origin of the bug? You need any assistance in solving?


Jakub Chmura staff premium answered 4 days ago

Hi @Christian Aichner,

We know what's wrong with tabs/pills... components but we need to implement and test this fix. In this case, there was a problem with the react-router library. We've found that the problem only occurs locally. If you put the project on the web, everything should be ok.

We're currently working to resolve the issue. If your solution doesn't break anything in your project, you can use it until our fix.

Best regards,

Kuba


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: React
  • MDB Version: 4.21.0
  • Device: Desktop
  • Browser: Google Chrome
  • OS: Windows 10 Professional
  • Provided sample code: No
  • Provided link: Yes