svelte-select icon indicating copy to clipboard operation
svelte-select copied to clipboard

loading-icon slot has conflicting class with UI framework

Open StrawHatHacker opened this issue 1 year ago • 1 comments

I assumed that the slot would replace the default spinner, but the spinner and the slot are there at the same time. I found out that is happening because of daisyUI, which has a class "loading" which is also present in your generated code.

image

Is there a way to resolve this conflict?

sveltekit 1.20.0 svelte 3.59.1

<script lang="ts">
	import Select from 'svelte-select';

	let items = [
		{ value: '1', label: 'One' },
		{ value: '2', label: 'Two' },
		{ value: '3', label: 'Three' }
	];
	let value: {};
	let loading = true;
</script>

<div class="flex m-6">
	<Select
		{items}
		class="select-input"
		bind:value
		placeholder="Search store"
		hideEmptyState
		loading
	>
		 <div slot="loading-icon">★</div>
	</Select>
</div>

StrawHatHacker avatar Sep 22 '23 15:09 StrawHatHacker

May i suggest prefixing your classes in a future update?

StrawHatHacker avatar Sep 22 '23 15:09 StrawHatHacker