Undocumented (?) border for input on focus in multiselect.

[davidahmed]

I am using the version on the repo README with slight modifications as follows:

<script>
  import Select from 'svelte-select';

  const items = [
    {value: 'chocolate', label: 'Chocolate', group: 'Sweet'},
    {value: 'pizza', label: 'Pizza', group: 'Savory'},
    {value: 'cake', label: 'Cake', group: 'Sweet', selectable: false},
    {value: 'chips', label: 'Chips', group: 'Savory'},
    {value: 'ice-cream', label: 'Ice Cream', group: 'Sweet'}
  ];

  const groupBy = (item) => item.group;
</script>

<Select {items} {groupBy}
	multiple={true}
	closeListOnChange={false}
	--multi-item-color="red"
	--multi-select-input-margin="20px"
	--multi-select-input-padding="20px"/>

I have tried debugging as much as I could but I can't figure out what is leaving these blue borders for the input field as show below.

I have tried to isolate things as much as possible, but fyi, my project uses tailwind.

[Fabiote2003]

I had the same problem, I am looking for a solution

[filipkyn]

@davidahmed @Fabiote2003

Ola guys, I somehow fix it. You need to overwrite tailwind selector.

Try this one.

<Select class="svelte-select" items={availableClasses} bind:value={selectedClasses} on:change={handleClassChange} multiple on:clear={handleClassClear} containerStyles="border-radius: 0px;" placeholder="Select tyre classes..." />

<style> :global(.svelte-select input[type='text']:focus) { --tw-ring-color: transparent !important; } </style>

[Fabiote2003]

Yes, I found that solution. It worked!