Bug with Tab when we have controls after the Tab

[kasra0]

Hi,

Version : 4.0.1

These Two screenshots show the problem.

For some reason the controls after are duplicated. This happens specifically when the length of the tabs is not the same.

import React, { useState, useEffect } from 'react';
import { Pane } from 'tweakpane';
export const BugTab: React.FC = () => {
  const [width, setWidth]  = useState<number>(200);
  const [height,setHeight] = useState<number>(200);
  useEffect(() => {
    const pane  = new Pane();
    const param = {width,height };
    const tab   = pane.addTab({
        pages: [{title: 'A'},{title: 'B'}, ],
      });
     const firstTab  =  tab.pages[0]
     const secondTab =  tab.pages[1]
     firstTab.addBinding(param, 'width', {min: 0,max: 400}).on('change', (e)=>setWidth(e.value))
     firstTab.addBinding(param, 'height',{min: 0,max: 400}).on('change', (e)=>setHeight(e.value))
     secondTab.addBinding(param,'width', {min: 0,max: 400}).on('change', (e)=>setWidth(e.value))
     pane.addBinding(param,     'width', {min: 0,max: 100}).on('change', (e)=>setWidth(e.value))
}, []);
  return null
};
export default BugTab;

Maybe I have to destroy a previous state I don't know... Am I missing something or it's a bug ? Thanks

[cocopon]

It seems that this is not a bug of Tweakpane. Can you see a drop shadow between the second width field and the third width field? This indicates that multiple panes are created and overwrapped at the same place.

Here is an small example that uses your code, but the problem didn't occur. https://codesandbox.io/s/tweakpane-issue-581-5lnhgk?file=/src/index.ts

I guess that this is caused by calling this function many times. You should create a single pane and reuse it to prevent the pane duplication.

[cocopon]

Feel free to reopen the issue if you have any updates.