fedorovvvv / svelte-floating-ui

Svelte✨ Floating UI 🎈
MIT License
151 stars 8 forks source link

A way to destroy the auto update function that ties to the scrolling #14

Open CrendKing opened 10 months ago

CrendKing commented 10 months ago

In this demo, I have a button that triggers a floating tooltip when mouse enter, and remove the tooltip when mouse leave. Obviously I want the onComputed() to run when the tooltip is showing. However, there doesn't seem to be an easy way to turn it off on-demand when the tooltip is hidden. As a result, you can see the console message keeps printing.

I know you mentioned in https://github.com/fedorovvvv/svelte-floating-ui/issues/8 that autoUpdate() is unavoidable when the tooltip is out of view. But what I'm asking is a way to completely reset the whole floating-ui back to before the first call to floatingContent().

Or is this request more appropriate for the upstream?

<script lang="ts">
    import { createFloatingActions } from 'svelte-floating-ui'

    let showTooltip = false

    const [floatingRef, floatingContent] = createFloatingActions({
        onComputed({ placement, middlewareData }) {
            if (!showTooltip) {
                console.log('I dont want to see this')
            }
        },
    })
</script>

<div style="overflow:auto; height: 500px; width:500px; border: 1px solid;">
    <div style="width:500px; height: 1200px; display:flex; align-items: center; justify-content: center;">
        <button on:mouseenter={() => (showTooltip = true)} on:mouseleave={() => (showTooltip = false)} use:floatingRef>Hello</button>

        {#if showTooltip}
            <div style="position:absolute; border: 1px solid; padding:4px;" use:floatingContent>Tooltip is a long one</div>
        {/if}
    </div>
</div>
fedorovvvv commented 10 months ago

Hiii✨ You may be able to dynamically update autoUpdate via update

Example:

$: update({
 autoUpdate: showTooltip
})
CrendKing commented 10 months ago

Thank you! According to the type definition, UpdatePosition specifically doesn't take autoUpdate, right? I tested your snippet and it does not work.

On the other hand, if I update(onComputed: () => {}), it no longer executes the old real onComputed, but still, this empty function is executed hundreds of times every time user scrolls, which is suboptimal.

fedorovvvv commented 10 months ago

It's weird😥 I'll try to fix that in future versions, thanks🙏

It will be necessary to stop autoUpdate at destroy