Topic: Issue with "MDBScrollspy" when we use it in "MDBTabs"
webdev@panterranetworks.com
priority
asked 1 month ago
Expected Behavior
In MDBScrollspy, the first tab should be active initially when used within MDBTabs.
Actual Behavior
Currently, the last tab is getting activated initially.
Resources (screenshots, code snippets, etc.)
Please refer to the image below for reference:
Sample Code
import React, { useState, useRef } from 'react'; import { MDBTabs, MDBTabsItem, MDBTabsLink, MDBTabsContent, MDBTabsPane, MDBRow, MDBCol, MDBScrollspy, MDBScrollspyLink } from 'mdb-react-ui-kit';
const ScrollspyTabsComponent = () => { const [basicActive, setBasicActive] = useState('tab1'); const handleBasicClick = (value) => { if (value === basicActive) { return; } setBasicActive(value); };
const section1 = useRef(null);
const section2 = useRef(null);
const section3 = useRef(null);
const section4 = useRef(null);
const sectionA = useRef(null);
const sectionB = useRef(null);
const containerRef = useRef(null);
return (
<div>
<MDBTabs className='mb-3 pt-5'>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleBasicClick('tab1')} active={basicActive === 'tab1'}>
Tab 1
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleBasicClick('tab2')} active={basicActive === 'tab2'}>
Tab 2
</MDBTabsLink>
</MDBTabsItem>
<MDBTabsItem>
<MDBTabsLink onClick={() => handleBasicClick('tab3')} active={basicActive === 'tab3'}>
Tab 3
</MDBTabsLink>
</MDBTabsItem>
</MDBTabs>
<MDBTabsContent>
<MDBTabsPane show={basicActive === 'tab1'}>
<MDBRow>
<MDBCol md='2'>
<MDBScrollspy container={containerRef}>
<MDBScrollspyLink targetRef={section1}>Section 1</MDBScrollspyLink>
<MDBScrollspyLink targetRef={section2}>Section 2</MDBScrollspyLink>
<MDBScrollspyLink targetRef={section3}>Section 3</MDBScrollspyLink>
<MDBScrollspyLink targetRef={section4}>Section 4</MDBScrollspyLink>
</MDBScrollspy>
</MDBCol>
<MDBCol md='8'>
<div id='element' ref={containerRef} className='scrollspy-example'>
<section ref={section1} id='section-1'>
<h3>Section 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
quaerat accusamus numquam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
quaerat accusamus numquam.
</p>
</section>
<section ref={section2} id='section-2'>
<h3>Section 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
quaerat accusamus numquam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
quaerat accusamus numquam.
</p>
</section>
<section ref={section3} id='section-3'>
<h3>Section 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
quaerat accusamus numquam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
quaerat accusamus numquam.
</p>
<section ref={sectionA} id='subsection-a'>
<h3>Subsection A</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
quaerat accusamus numquam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
quaerat accusamus numquam.
</p>
</section>
<section ref={sectionB} id='subsection-b'>
<h3>Subsection B</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
quaerat accusamus numquam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
quaerat accusamus numquam.
</p>
</section>
</section>
<section ref={section4} id='section-4'>
<h3>Section 4</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
quaerat accusamus numquam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error
maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis
quaerat accusamus numquam.
</p>
</section>
</div>
</MDBCol>
</MDBRow>
</MDBTabsPane>
<MDBTabsPane show={basicActive === 'tab2'}>Tab 2 content</MDBTabsPane>
<MDBTabsPane show={basicActive === 'tab3'}>Tab 3 content</MDBTabsPane>
</MDBTabsContent>
</div>
);
};
export default ScrollspyTabsComponent;
Grzegorz Bujański
staff
answered 3 weeks ago
We checked twice and everything looks fine after changing the event. Do you have any additional code in the component that could affect the operation of MDBTabs
?
Mateusz Lazaru
staff
answered 1 month ago
If you are using MDB React version 7.0.0 or later, you should change the show
property to open
.
After having this changed, I was not able to reproduce the error in either version 7.2.0 or version 8.0.0.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 7.2.0
- Device: Desktop
- Browser: Chrome
- OS: Windows 11
- Provided sample code: No
- Provided link: No