Nav tabs first tab always active


Topic: Nav tabs first tab always active

BSTeam asked 5 years ago

Expected behavior Each tab will show active status after clicking on it Actual behavior Clicked tab plus first tab always were shaw as active Resources (screenshots, code snippets etc.) enter image description here![enter image description here][1]

[1]: https://usercontent.mdbootstrap.com/mdb-images/support/5df237db-d84f-4e5e-984d-85c09b7290d4-Screen%20Shot%202019-09-19%20at%205.36.52%20PM.jpg`

Home

Saved Alerts

Activity

Dates & Tasks

{this.props.notificater && this.props.notificater === "true" ? (

Notification

) : null}

state = { activeTab: "1" };

toggle = tab => e => { if (this.state.activeTab !== tab) { this.setState({ activeTab: tab }); } };

`


Konrad Stępień staff answered 5 years ago

Hi @BSTeam,

Can you send me more code to fix this issue? Or send me a link from where you took an example.

Best regards, Konrad.


BSTeam answered 5 years ago

It's hard to past all code here, because the issue happened when I used nav tabs with routing.`class Routes extends React.Component { render() { return ( {" "} {" "} {" "} {" "} {" "} {" "} {" "} page Not Found ; }} />{" "} ); } }

class Landing extends PureComponent { state = { activeTab: "1" };

toggle = tab => e => { if (this.state.activeTab !== tab) { this.setState({ activeTab: tab }); } };

render() { return ( <>
{" "}  {new Date().toDateString()}

{" "} {" "}  last logged in at {this.props.lastLoginDt}

  Data refreshed 3 weeks ago, available through June 1


Home

Saved Alerts

Activity

Dates & Tasks

); } } `


Konrad Stępień staff answered 5 years ago

Hi @BSTeam,

And is a link to the repository possible?

Please check your property in <MDBTabPane tabId='3' role='tabpanel'>, maybe two tabs have the same tabId property.

Please check it and tell me if the problem still exists


BSTeam answered 5 years ago

There were no MDBTabPane configured, we use NavLink to route only, below is first couple of tabs.

 <MDBNav className="nav nav-tabs font-weight-bold">
        <MDBNavItem>
          <MDBNavLink
            to="/"
            active={this.state.activeTab === "1"}
            onClick={this.toggle("1")}
            role="tab"
          >
            <p>Home</p>
          </MDBNavLink>
        </MDBNavItem>
        <MDBNavItem>
          <MDBNavLink
            to="/landing/alerts"
            active={this.state.activeTab === "2"}
            onClick={this.toggle("2")}
            role="tab"
          >
            <p>Saved Alerts</p>
          </MDBNavLink>
        </MDBNavItem>

.........


BSTeam commented 5 years ago

Hi Konrad, please see above code portion, if you need more info just let me know. Thank you very much for your help.


Konrad Stępień staff answered 5 years ago

Hi @BSTeam,

Can you change code for like that?

<MDBNavLink
   to="/#"
   active={this.state.activeTab === "1"}
   onClick={this.toggle("1")}
   role="tab"
>

please try my code and tell me if the issue still exists.

Best regards, Konrad.


BSTeam answered 5 years ago

Hi Konrad,

I tried your code and unfortunately the issue did not go away.

Appreciate your efforts.

BSTeam


Konrad Stępień staff commented 5 years ago

This is possible to we have a problem with Nav link. Today is a new release, please check if the problem still exists after some hours.

If you still have a problem, please tell me about it and i will try to fix for the next release.

I would like to apologize for the inconvenience.

Best regards, Konrad.


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.19.2
  • Device: macbook pro
  • Browser: chrome
  • OS: OS
  • Provided sample code: No
  • Provided link: Yes
Tags