Popup closeQuery prop does not work as expected

[endigo9740]

          Currently the `closeQuery` prop doesn't work as outlined in the documentation. It states: `You may provide a custom query or set '' to disable this feature.`

However, setting closeQuery to '' throws an error in the console.

We should probably adjust the onWindowClick event to account for this:

function onWindowClick(event: any): void {
	// Return if the popup is not yet open
	if (popupState.open === false) return;
	// Return if click is the trigger element
	if (triggerNode.contains(event.target)) return;
	// If click it outside the popup
	if (elemPopup && elemPopup.contains(event.target) === false) {
		close();
		return;
	}
	// Handle Close Query State
	const closeQueryString: string = args.closeQuery === undefined ? 'a[href], button' : args.closeQuery;
	// Respect not querying for things if the string is empty
	if (closeQueryString === '') {
		return;
	}
	const closableMenuElements = elemPopup?.querySelectorAll(closeQueryString);
	closableMenuElements?.forEach((elem) => {
		if (elem.contains(event.target)) close();
	});
}

Also I would propose that we could potentially solve some issues with data-popup conflicts by being able to pass in a bind:this reference instead of only a data-popup value.

Example:

<script lang="ts">
// Let the user maintain their own reference to the target
let popupEl: HTMLElement | null = null;

const popupFeatured: PopupSettings = {
	event: 'focus-click',
	// Matches the real element from bind:this
	target: popupEl,
	placement: 'bottom',
};
</script>

<button class="btn variant-filled" use:popup={popupFeatured}>Show Popup</button>

<div class="card p-4 w-72 shadow-xl" bind:this={popupEl}>
	<div><p>Demo Content</p></div>
</div>

Accomplishing this would likely be fairly straightforward as well by modifying the setDomElements method.

function setDomElements(): void {
	// If a real element was passed, use it as the elemPopup
	if (args.target instanceof Element) {
		elemPopup = args.target;
	} else {
		elemPopup = document.querySelector(`[data-popup="${args.target}"]`) ?? document.createElement('div');
	}
	elemArrow = elemPopup.querySelector(`.arrow`) ?? document.createElement('div');
}

Originally posted by @DerrikMilligan in #1916 (comment)

[DerrikMilligan]

I would be happy to make a pull request for this if we feel that my solution was acceptable. I was trying to read the contribution guidelines and someone needs to be assigned to work on an issue before they make a pull request right?

[Sarenor]

Consider that done 👍 (the assigning I mean)