Long texts somehow break the floating of the text

[jbirtel]

I need to use really long texts in a dropdown and simply making the dropdown itself larger is not an option, as it needs to work with smaller screens, too. The problem that occurs is the following. At first, after selecting the long text item, this happens: which is totally fine and as expected. So, we most importantly can see the start of the item string.

After clicking somewhere outside the dropdown and then either clicking inside the dropdown or on the indicator icon, I get the following view, which won't change until I select a different item and reselect the long text:

I tried playing around in the DOM and with CSS props, but I could not find why the text floats to the right after reclicking on the item.

What I would like to have/what I expect: Essentially what I want is that one always can see the start of the string instead of the end even after refocusing/reclicking.

I reproduced on the REPL that you included to test custom item renderers. My plan was to show an ellipsis when the text ist too long such that this issue does not occur, but it did not work that way. With this code, it should be reproducable:

<script>
	import Svelecte from 'svelecte';

	const options = ['this is a really really long item, that includes a freaking long text and because of this freaking long text, the dropdown breaks unfortunately.', 'World', 'Svelte'];
</script>
<Svelecte {options}/>