Vue3 and ref on HTML crashes Photoshop

The solution: wrap your reference in toRaw(myElem.value). This converts the Proxy object into a regular object, and everything then works perfectly. I’m not sure exactly what’s happening under the hood, but the issue definitely lies with the Proxy. I hope this post helps someone!

<template>
...
<div ref="myElem">Item</div>
...
</template>

<script setup>
import { toRaw } from 'vue'

const myElem = ref(null)

function scrollToItem (){
  if (myElem.value) {

    //Crashes PS
    myElem.value.scrollIntoView({ behavior: 'smooth', block: 'center' });

    // Works Fine!
    toRaw(myElem.value).scrollIntoView({ behavior: 'smooth', block: 'center' });
  }
}

</script>
1 Like