Mouse up incorrectly triggers select focus and drop down when not in focus.

[kane81]

1. Outside of the select component, click the mouse button and hold.
2. Drag the cursor over the select component and release the mouse button.
3. The select incorrectly opens up as per images below

• I tested with a standard select and it does not dropdown on mouse button release.

This is causing an issue with copy and paste as seen below.
User highlights the number and as the cursor has hovered over select - it steals focus from the number I wanted to copy and expands the select...

[kane81]

Problem code in Select.svelte - on on:pointerup instead of on:click

<div
	class="svelte-select {containerClasses}"
	class:multi={multiple}
	class:disabled
	class:focused
	class:list-open={listOpen}
	class:show-chevron={showChevron}
	class:error={hasError}
	style={containerStyles}
	on:pointerup|preventDefault={handleClick}
	bind:this={container}
	use:floatingRef
	role="none"
>

FYI I fixed the issued by stopping the pointerup event and trigger on the click event. Additionally I added the ability to copy and paste text within a select too.

onMount(() => {
		// fix bug where the original coding for svelte-select uses pointerup event instead of onclick event!
		const selectItem = document.getElementById(id);
		if (selectItem) {
			const container = selectItem.parentNode.parentNode;
			container.addEventListener(
				"pointerup",
				(e) => {
					e.stopPropagation();
				},
				true
			);
			container.addEventListener(
				"click",
				() => {
					// allow selection of text rather than stop selection
					const selectedText = window.getSelection().toString();
					if (!selectedText) {
						listOpen = !listOpen;
					}
				},
				false
			);
		}
	});

[steppenwolfXYZ]

This is the same as #585 but with easy-to-understand visual explanation. I have the same issue.

[kane81]

Well at least you can see the code fix I applied without changing the component :)