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

popup on nested layout only works once page is refreshed once #2465

Open
TheEisbaer opened this issue Feb 5, 2024 · 6 comments · May be fixed by #2466
Open

popup on nested layout only works once page is refreshed once #2465

TheEisbaer opened this issue Feb 5, 2024 · 6 comments · May be fixed by #2466
Labels
bug Something isn't working wontfix This will not be worked on
Milestone

Comments

@TheEisbaer
Copy link

Current Behavior

having a in a nested layout and pressind said button on first page lage doesn't open any popup
after refreshing the page once, clicking on the button opens expected popup

Expected Behavior

popup should open on first button click

Steps To Reproduce

in my repro:

  1. click on any login button on /login
  2. click on the avatar on the top right -> no popup
  3. reresh page
  4. click on the avatar on the top right -> popup appears

Link to Reproduction / Stackblitz

https://stackblitz.com/~/github.com/TheEisbaer/raise-temp

More Information

No response

@TheEisbaer TheEisbaer added the bug Something isn't working label Feb 5, 2024
@Sarenor
Copy link
Contributor

Sarenor commented Feb 5, 2024

I am pretty sure that the problem is this line because the element annotated with data-popup does not exist yet during Clientside rendering.

Hugos already suggested a mutation observer which is probably the correct way to handle this.

@TheEisbaer
Copy link
Author

TheEisbaer commented Feb 5, 2024

I've tried around for a bit and this seems to work:

	function setDomElements() {
		elemPopup =
			document.querySelector(`[data-popup="${args.target}"]`) ?? document.createElement('div');
		elemArrow = elemPopup.querySelector(`.arrow`) ?? document.createElement('div');
	}

	/**
	 *  MutationObserver callback
	 * @param {MutationRecord[]} mutationsList
	 * @param {MutationObserver} observer
	 */
	function handleMutation(mutationsList, observer) {
		for (const mutation of mutationsList) {
			// If the mutation target has the data-popup attribute and the correct value is set, update the elements and disconnect the observer
			if (
				mutation.target.attributes['data-popup'] &&
				mutation.target.attributes['data-popup'].value == args.target
			) {
				setDomElements(); // Update elements when there's a change in the DOM
				observer.disconnect();
				return;
			}
		}
	}

    //  Instantiate MutationObserver with the callback
	const observer = new MutationObserver(handleMutation);

	// Start observing the target element
	observer.observe(document.body, { childList: true, subtree: true });

@iamsbro
Copy link

iamsbro commented Feb 22, 2024

A quick fix for me was to delay loading the element that has the use:popup until onMount has run.

Example:

<script>
    import { onMount } from 'svelte';

    let ready = false;
    onMount(() => {
        ready = true;
    });
</script>

{#if ready}
    <div use:popup={{ event: 'hover', target: 'popup', placement: 'top' }}>
        Test
    </div>
{/if}

<div class="tooltip" data-popup="popup">
    <slot name="tooltip" />
</div>

@endigo9740
Copy link
Contributor

See my response here: #2466 (comment)

@endigo9740 endigo9740 added the wontfix This will not be worked on label Feb 26, 2024
@TheEisbaer
Copy link
Author

@endigo9740 Hi Chris,
I modified your example to get my issue "working", it seems like its connected to the button thats triggering the popup containing an avatar (or other elements possibly).

on /test when clicking the avatar on the top left I get the same behaviour.
skeleton-popup-test.zip

@endigo9740
Copy link
Contributor

Thanks @TheEisbaer, I'll circle back and review. If I feel confident the change submitted will resolve the issue I'll reopen and merge.

@endigo9740 endigo9740 reopened this Feb 28, 2024
@endigo9740 endigo9740 added this to the v2.0 milestone Apr 5, 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 wontfix This will not be worked on
Projects
None yet
4 participants