rob-balfre / svelte-select

Svelte Select. A select component for Svelte
https://svelte-select-examples.vercel.app
Other
1.25k stars 175 forks source link

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

Open davidahmed opened 1 month ago

davidahmed commented 1 month ago

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.

Screenshot 2024-05-05 at 18 01 58

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