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

Absolute position not recomputed when options length decreases #510

Closed TheRolfFR closed 1 year ago

TheRolfFR commented 1 year ago

Hello, Thanks for your component, very easy to use with great doc and examples.

I have a searchable select and when i focus it when the item is positioned at the bottom of the screen, the options open on the top: image But as the results decrease with search, the top position of the options are not computed, and appear "floating": image

I don't think it is very complicated, just watch for changes in displayed items length, and you can recompute the said top position. Maybe extracting the function and recalling it, I didn't check the code yet.

If you want to try it by yourself, just try it on the page https://beta.faithfulpack.net/add-ons.

Thanks!

rob-balfre commented 1 year ago

@TheRolfFR this should do the trick...

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

    let items = ['One', 'Two', 'Three'];

    let floatingConfig = {autoUpdate: true}; // just need to add this.
</script>

<Select {items} {floatingConfig} /> 

https://svelte.dev/repl/f7aa566557df476ba6c1ba9c4d6cd2f2?version=3.55.0