next/prev tab event jumps minimum 2 tabs, even though the screen might only show 1

[Raycoms]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://ant.design/components/tabs/

Steps to reproduce

Create a tab component with a long text in the tab (https://ant.design/components/tabs/). Shrink the browser until only 1 tab is visible. Click the next tab button, it will jump over the next tab and display the 3rd and not the second.

What is expected?

It should then always jump only the visible tabs.

What is actually happening?

It jumps in minimum 2 steps (works for all >= 2)

Environment	Info
antd	3.19.2
React	16.8.6
System	Linux Manjaro
Browser	Brave

[ant-design-bot]

Hello @Raycoms. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

你好 @Raycoms, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。7 天内未跟进的 issue 将会被自动关闭。

[Raycoms]

I found out that the problem is related to me switching the active key in the progress.
I want that when you click the nextTab button it selects the next tab as well (and doesn't only make the next tab visible)

Minimum code:

import { Card, Tabs, Button, Icon } from "antd";
import React from "react";
import styles from "./LeaseTabs.module.scss";

const TabPane = Tabs.TabPane;

class Comp extends React.Component {

  constructor( props ) {
    super( props );
    this.state = {
      tab: "1",
    }

    this.next = this.next.bind( this );
    this.tab = this.tab.bind( this );
    this.prev = this.prev.bind( this );
  }

  next(){
    this.setState({tab: (Math.min(4, parseInt(this.state.tab) + 1)).toString()});
  }

  tab(key){
    this.setState({tab: key})
  }

  prev(){
    this.setState({tab: (Math.max(1, parseInt(this.state.tab) - 1)).toString()});
  }

  render() {
    return (
      <div>
        <Card className={ styles.card }>
          <Tabs defaultActiveKey="1" activeKey={ this.state.tab } onNextClick = { this.next } onTabClick={ this.tab } onPrevClick={ this.prev }>
            <TabPane tab={
              <span>
                <Icon type="usergroup-delete"/>
                One
              </span> } key="1">
            </TabPane>
            <TabPane tab={
              <span>
                <Icon type="usergroup-add"/>
               Two
              </span> } key="2">
            </TabPane>
            <TabPane tab={
              <span>
                <Icon type="alert"/>
               Three
              </span> } key="3">
            </TabPane>
            <TabPane tab={
              <span>
                <Icon type="audit"/>
                Four
              </span> } key="4">
            </TabPane>
          </Tabs>
        </Card>
      </div>
    );
  }
}

export default;

[ant-design-bot]

This issue is closed because it has been marked as Need Reproduce, but has not had recent activity.
If you can provide a reproduce, feel free to ping anyone of our maintainers to reopen this issue.
Thank you for your contributions.