SolidJS•14mo ago

Ref pointing to the wrong element

I have a component that uses a ref:

let bodyElement: HTMLDivElement;
// Somewhere in the TSX:
<div class={styles.body} ref={bodyElement!}>

let bodyElement: HTMLDivElement;
// Somewhere in the TSX:
<div class={styles.body} ref={bodyElement!}>

Let's say the component is called Foo. I have a parent component rendering Foo twice. The problem is that both refs bodyElement are pointing to the ref in the last Foo component. Inside Foo I log the refs:

onMount(() => {
  console.log(bodyElement) // points to the last `bodyElement` in the last Foo
  console.log(bodyElement.getBoundingClientRect())
});

onMount(() => {
  console.log(bodyElement) // points to the last `bodyElement` in the last Foo
  console.log(bodyElement.getBoundingClientRect())
});

and I notice that the logs are pointing to the same element, the last bodyElement (in the last Foo). I could not reproduce the problem in the playground.

3 Replies

Grahf•14mo ago

Maybe making the ref a signal would help?

MathieuOP•14mo ago

I actually just asked ChatGPT and immedtiately found out it's because I declared the ref outside the component... yay

Grahf•14mo ago

Nice

Gaming

Programming

Ref pointing to the wrong element