getBoundingClienRect() retrieve good position of an element the first time but {0,0,0,0} after the second rendering

Question

I'm currently developing an Ionic4/stencil app (with the PWA Toolkit: https://ionicframework.com/pwa/toolkit) and get an issue for get the position of a component.

@Component({
    tag: 'app-projects-gallery',
    styleUrl: 'app-projects-gallery.scss'
})
export class AppProjectsGallery {

/* some code here*/


 */
private computeGridProperties() {
   /* some code here*/
}

getPos(id: number, e) {
    var element = document.getElementById("img" + id);
    var r = element.getBoundingClientRect();
    console.log("event" + e);
    console.log("Les dimensions du rectangle sont :");
    console.log("{top:" + r.top + ", left:" + r.left + ", right:" + r.right 
 + ", bottom:" + r.bottom + "}");
}

render() {

    return (
        <ion-page>
            <ion-content>
                <ion-grid>
                    <ion-row>
                        {this.projets.map((projet) => {
                            return <ion-col class={'column-' + this.cardsPerRow}>
                                <ion-button onClick={this.getPos.bind(this, this.projets.indexOf(projet))} href={`/project_infos/${this.projets.indexOf(projet)}`} >
                                        <img id={"img" + this.projets.indexOf(projet)}
                                        class='project-logo'
                                        src={this.rootPath + projet.directoryName + '/logo' + this.fileExtension} />
                                </ion-button>
                            </ion-col>
                        })}
                    </ion-row>
                </ion-grid>
            </ion-content>
        </ion-page>
    );
}

}

When the user clicks on the ion-button, we call the getPos() method with the id of the img that we want to retrieve the position.

When i click on the button, all is working good and i see in the console the good position of my img :

event[object MouseEvent]
app-projects-gallery.js:69 Les dimensions du rectangle sont :
app-projects-gallery.js:70 {top:79, left:144.046875, right:215.921875, 
bottom:151.15625}

But if i click again on the image, i get the {0,0,0,0} coordinate...

event[object MouseEvent]
app-projects-gallery.js:69 Les dimensions du rectangle sont :
app-projects-gallery.js:70 {top:0, left:0, right:0, bottom:0}

do you have an explanation for this?

Thanks in advance,

Answer 1

I finally found the solution,

In Stencil, the document.getElementById doesn't work. Instead of this function, you have to define a ref element.

In my case, the solution is :

<ion-button onClick={() => this.getPos(index)} href={`/project_infos/${this.projets.indexOf(projet)}`} >
                                        <img ref = {(el : HTMLImageElement) =>  this.imageLogo = [...this.imageLogo, el]}
                                        class='project-logo'
                                        src={this.rootPath + projet.directoryName + '/logo' + this.fileExtension} />
                                </ion-button>

And i can access elements in my imageLogo : HTMLImageElement[] directly with :

var element = this.imageLogo[index];
var r = element.getBoundingClientRect();

Stencil seems to be a good techno, but i still have some work for appreciate it ^_^