Topic: Issue with "MDBScrollspy" when we use it in "MDBTabs"
webdev@panterranetworks.com priority asked 5 months 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 4 months 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
?
webdev@panterranetworks.com priority commented 3 months ago
Thank you for checking that. We do have some additional code in the component, and we've used MDBScrollSpy in several other places as well. Unfortunately, we're encountering the same issue across all instances, and we're not sure what's causing it. Any insights or suggestions you could provide would be greatly appreciated.
Bartosz Cylwik staff commented 3 months ago
Hi! I've checked on fresh installed app and I do not see the issue. Check out my demo app
https://b-cylwik-mdb5-free-react-tabs-and-scroll.mdbgo.io/
I had to add some styling from documentation to make it work - there is a scrollspy-example
class that needs position, overflow and height set. After that, the scrollspy seem to work fine.
.scrollspy-example {
position: relative;
height: 200px;
overflow: auto;
}
Maybe you need those styles aswell? If that doesn't help, please show us some more code so that we can replicate the issue on our end and try to help.
Mateusz Lazaru staff answered 5 months 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