brianvoe / slim-select

Slim advanced select dropdown
http://slimselectjs.com
MIT License
1.07k stars 200 forks source link

Add 'fixed' contentPosition option #580

Closed shibaobun closed 1 week ago

shibaobun commented 1 month ago

Is your feature request related to a problem? Please describe. Hello, I needed a fuzzy search select element and this project was exactly what I needed! While it works great, I noticed an issue that showed up when embedding the item in a modal using position: fixed. When the page scrolls, there's a bit of a delay until the animation shows up, displayed below: https://github.com/user-attachments/assets/7faf0788-99f6-44aa-b5d3-dd849fb53b09

However, changing this to position: fixed seems to work great, with the exception that the script attempts to adjust when the page is scrolled down. https://github.com/user-attachments/assets/102d150d-99d6-4501-9b7f-bd6da3ed4e12

Describe the solution you'd like I'm not familiar with this codebase, but it seems like a contentPosition: 'fixed' option can work just like the 'absolute' mode, but simply ignore the page scroll offset, and also apply a position: fixed style for .ss-content.

Describe alternatives you've considered I've used libraries such as Floating UI that could handle this, but would add an additional dependency

Additional Context Please let me know if you have any questions on this request! I may be able to get around to implementing this and adding a PR back, but I'm currently a bit busy and this could end up taking a while

Shoplifter commented 1 month ago

Code shows that the scroll event is not dispatched if you use a setting openPosition: 'up' or 'down', but not 'auto' (which is the default). In a fixed container that is probably a viable option for you.

If you need 'auto', you can play around with the settings contentLocation and contentPostion. The scroll event will still fire, but hopefully with hardly noticeable effects.

Update: Sorry, I overlooked you have already tried contentPostion. Still, this might have a different effect when combined with contentLocation.

brianvoe commented 1 month ago

This looks like an animation issue. On auto it runs a window scroll listener and triggers the movement to the right location. First try by turning your animation and transactions off and see what happens and report back.

That being said im open to any updates someone wants to do to make it perfectly stick to where it needs to go. Even if someone did the research and found out how another package does this perfectly(doesnt need to be a dropdown just something that forces another element to stick to a place). Show me a simple working example, not just another package does it. Ill do the code if thats an issue just get my 90% there. If anything I can at least add it to the list of features to build and eventually it will get knocked out.

shibaobun commented 1 month ago

With openPosition set to up or down, it seems like it still behaves similarly to the 'auto', except that it will no longer flip back and forth depending on the position (which is expected). That said, I fixed it with minimal changes and will be submitting a PR shortly :smile:

https://github.com/user-attachments/assets/b5ca2f6f-099f-4e2c-90d9-6b0c8bc26faa

cbmike commented 1 week ago

Thanks a lot! I encountered a similar issue when trying to apply Slim Select within the dialog tag. Your PR have fixed that.