useMousePressed - account for target initially being `null` in non client-only components

[DamianGlowala]

Clear and concise description of the problem

Currently, I can't find a way to declare useMousePressed in the top level <script setup> of a component, which doesn't have the target element available straightaway (initially is null before the component mounts). Could this be handled internally, please?

Suggested solution

Watch target internally and apply listeners based on its presence.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[kongmoumou]

Any usage example?

[DamianGlowala]

Sure! Here you are:

<template>
  <div ref="templateRef" />
</template>

<script setup lang="ts">
const templateRef = ref<HTMLDivElement | null>(null)

const { pressed } = useMousePressed({
  target: templateRef // will initially be null and useMousePressed does not account for this
})
</script>

[VividLemon]

How does one press on a mouse without the page being mounted?

[DamianGlowala]

Obviously you can't, hence I created this issue asking whether it would be possible to delegate this check to the useMousePressed, rather than having to account for this myself.

[VividLemon]

I guess I was a bit confused as to the question. Is the issue that target typing requires HTMLElement and not HTMLElement | null?

[DamianGlowala]

This appears to be an issue most likely related to a third-party library and how it exposes a template ref.

Appreciate your help guys, will close it for now.