Use Vertical Steps component from antd with in a ScrollPanel from PrimeReact

Question

I would like to use the Vertical Steps from antd(https://ant.design/components/steps/) within a primeReact ScrollPanel(https://www.primefaces.org/primereact/#/scrollpanel). I would also like to use the "Next" and "Previous" button as shown in the "antd" example. All works fine till here, but when I have a lot of steps and the click on "Next" moves to next step but the Scroller doesn't move i.e. the highlighted step moves out of View. How to make the scroll also move so the selected Step is in centre View?

Code for vertical Steps inside ScrollPanel:

class VerticalStepsWithContent extends Component {
  constructor(props) {
    super(props);
    this.state = { current: 0 };
  }

  next() {
    const current = this.state.current + 1;
    this.setState({ current });
  }

  prev() {
    const current = this.state.current - 1;
    this.setState({ current });
  }

  onChange = current => {
    console.log("onChange:", current);
    this.setState({ current });
  };

  render() {
    const { Step } = Steps;
    const steps = [
      {
        title: "First",
        content: "First-content"
      },
      {
        title: "Second",
        content: "Second-content"
      },
      {
        title: "Last",
        content: "Last-content"
      }
    ];
    const { current } = this.state;
    return (
      <div>
        <div className="steps-action">
          {current < steps.length - 1 && (
            <Button type="primary" onClick={() => this.next()}>
              Next
            </Button>
          )}
          {current === steps.length - 1 && (
            <Button
              type="primary"
              onClick={() => message.success("Processing complete!")}
            >
              Done
            </Button>
          )}
          {current > 0 && (
            <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
              Previous
            </Button>
          )}
        </div>
        <ScrollPanel
          header="Summary"
          style={{ height: "400px" }}
          className="custom"
        >
          <Steps
            direction="vertical"
            current={current}
            onChange={this.onChange}
          >
            {steps.map(item => (
              <Step key={item.title} title={item.title} />
            ))}
          </Steps>
        </ScrollPanel>
        {/* <div className="steps-content">{steps[current].content}</div> */}
      </div>
    );
  }
}
export default VerticalStepsWithContent;

Answer 1

You didn't bind class functions to this instance (which is a common bug):

class VerticalStepsWithContent extends Component {
  constructor(props) {
    super(props);
    this.state = { current: 0 };
    this.next = this.next.bind(this);
    // bind rest of the functions
  }
}

You should avoid the use of constructor, instead use class properties:

class VerticalStepsWithContent extends Component {
  state = { current: 0 };

  next = () => {
    const current = this.state.current + 1;
    this.setState({ current });
  };

  // ...
}
export default VerticalStepsWithContent;