Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
CrendKing opened this issue Jan 29, 2024 · 3 comments
Open
Labels
bug Something isn't working

Comments

@CrendKing
Copy link

CrendKing commented Jan 29, 2024

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 #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
Copy link
Owner

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

Example:

$: update({
 autoUpdate: showTooltip
})

@CrendKing
Copy link
Author

CrendKing commented Jan 29, 2024

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
Copy link
Owner

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

It will be necessary to stop autoUpdate at destroy

@fedorovvvv fedorovvvv added the bug Something isn't working label Jan 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants