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;