svelte-select
svelte-select copied to clipboard
loading-icon slot has conflicting class with UI framework
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.
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>
May i suggest prefixing your classes in a future update?