React-bootstrap tabs: DefaultActiveKey locks the change of color on selected tab

Question

I have a strange issue - I have three tabs with react-bootstrap, they all work as intended and render as the logic implies.

However, it will, indeed, initialize on tab {1}. However, if I pick another tab, it will correctly initialize and render it, but the "visual" graphics of chosen tab won't change: It will still be bold on the first tab, rather than the selected one.

Here's the snip where it's rendered. Did I do something wrong?

        <div>
            <Tab.Container id="tabs-with-dropdown" activeKey={store.key} onSelect={store.handleSelect} defaultActiveKey={1} >
                <div>
                    <NavigationBar store={store} />
                    <Tab.Content animation>
                        <Tab.Pane eventKey={1}>
                            <Panels />
                        </Tab.Pane>
                        <Tab.Pane unmountOnExit={true} eventKey={2}>
                            <Settings  />
                        </Tab.Pane>
                        <Tab.Pane unmountOnExit={true} eventKey={3}>
                            <Users />
                        </Tab.Pane>
                    </Tab.Content>
                </div>
            </Tab.Container>
        </div>

And the navbar component, where you can navigate the tabs return something like this:

<div className="navbar navbar-inverse navbar-fixed-top" role="navigation"
                     style={{background: "#264b6b">
                    <div className="container-fluid">
                        <div className="navbar-header">
                            <div>
                                <Nav bsStyle="tabs" className="tabmenu"
                                     style={{
                                         position: "absolute",
                                         marginLeft: "14%",
                                         color: "white",
                                         backgroundColor: "#264b6b",
                                         borderBottom: "none",
                                         fontVariant: "small-caps",
                                         fontFamily: "'Open Sans', sans-serif",
                                         fontWeight: "400"
                                     }}>
                                    <NavItem eventKey={1}>
                                        panels
                                    </NavItem>
                                    <NavItem eventKey={2}>
                                        settings
                                    </NavItem>
                                    <NavItem eventKey={3}>
                                        users
                                    </NavItem>
                                </Nav>
                            </div>
                        </div>
                    </div>
                </div>

Tab {1} will be marked as "active" all the time by the styling which is strange; the others are mounted and rendered in the react components. Any obvious reasons for this? It was working until recently, and I attempted to restore old commits to find the issue, but nothing really changed in the code here itself.

If I console.log the store.key and store.handleSelect they correctly mark the active tab as either 1, 2 or 3 with no issues.

gkri · Accepted Answer · 2017-05-23 09:40:42Z

1

You use controlled tabs, so the defaultActiveKey = 1 is not needed because it's used only for the uncontrolled Tabs component. You should initialize your tab by setting your store.key to the tab you want instead.

answered May 23, 2017 at 9:40

gkri

2,0414 gold badges20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-bootstrap tabs: DefaultActiveKey locks the change of color on selected tab

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related