phaser - container not moving it's objects

I'm using external class with a container and trying to move it

import Phaser from 'phaser';

export default class tabContainer extends Phaser.GameObjects.Container {

  container_hit_clicker;

  constructor(scene){
    super(scene);

    this.container_hit_clicker = this.scene.add.rectangle(this.scene.scale.width-100, this.scene.scale.height-100, 50, 100, 0xff0000).setOrigin(0).setDepth(8);
    this.container_hit_clicker.setInteractive().on('pointerdown', () => {
      this.openContainer();
    });

  }

  openContainer(){
    this.scene.tweens.add({
      targets  :this,
      x        :{from:this.x, to:100},
      ease     :'Cubic.easeOut',
      duration :500,
      onUpdate :function(){ console.log(this.x); }
    });
  }

}

So I add this container to my scene

this.tabContainer = new tabContainer(this);

Container is being added fine with it's objects but the tween is not working.

I can see position X is being changed in console.log but the objects keeps in same position.

Am I doing something wrong?

The problem is that you need to add, the gameobject to the container, and the container to the scene, so that it works.

In your current code you are just adding the rectangle to the scene.

Here is a small Demo:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

document.body.style = 'margin:0;';

class tabContainer extends Phaser.GameObjects.Container {

  container_hit_clicker;

  constructor(scene){
    super(scene);

    this.container_hit_clicker = this.scene.add.rectangle( 50, 50, 50, 80, 0xff0000)
        .setOrigin(0)
        .setDepth(8);
    this.container_hit_clicker
        .setInteractive()
        .on('pointerdown', () => {
            this.openContainer();
        });
    this.add(this.container_hit_clicker);
  }

  openContainer(){
    this.scene.tweens.add({
      targets  : this,
      x        : { from: this.x, to: 200 },
      ease     : 'Cubic.easeOut',
      duration : 500,
      onUpdate : () => { console.log(this.x); },
    });
  }
}

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: { create },
}; 

function create () {
    this.add.text(10,10, 'Click the Red-Rectangle')
        .setScale(1.5)
        .setOrigin(0)
        .setStyle({fontStyle: 'bold', fontFamily: 'Arial'});

    let container = new tabContainer(this);
    
    this.add.existing(container);
}

new Phaser.Game(config);
console.clear()

<!-- language: lang-html -->

<script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>

<!-- end snippet -->