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

loading-icon slot has conflicting class with UI framework #633

Open
StrawHatHacker opened this issue Sep 22, 2023 · 1 comment
Open

loading-icon slot has conflicting class with UI framework #633

StrawHatHacker opened this issue Sep 22, 2023 · 1 comment

Comments

@StrawHatHacker
Copy link

StrawHatHacker commented Sep 22, 2023

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 StrawHatHacker changed the title loading-icon slot not working loading-icon slot has conflicting class with UI framework Sep 22, 2023
@StrawHatHacker
Copy link
Author

May i suggest prefixing your classes in a future update?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant