Add SearchableSelect component with example

[dricair]

Added:

• SearchableSelect isolated inside a searchable_select feature as it adds several dependencies
• example/searchable_select
• Documentation

Feedback welcome.

[isosphere]

First, thank you for your contribution. This looks like a good quality PR overall.

The behaviour of the example is jarring. When I click one of the selects, the browser scrolls down to the selected item in the list, even if its the last item. If we're going to move the scroll location, IMO it should be to a bit above the SearchableSelect instance. Perhaps no auto-scroll at all, though?

[dricair]

Hi The behaviour I wanted was that when we open a select box, it makes the selected item visible. This is what happens in a standard Select component, although a normal select component can open on top instead of bottom (But I am not sure it's possible/wanted in this context). This has the effect of potentially scrolling the window to make it visible, I am not sure that there is another way to do it (I only order to make this element visible, not scroll the window). Cedric Le lun. 10 févr. 2025 à 02:49, Matthew Scheffel ***@***.***> a écrit :

…

First, thank you for your contribution. This looks like a good quality PR overall. The behaviour of the example is jarring. When I click one of the selects, the browser scrolls down to the selected item in the list, even if its the last item. If we're going to move the scroll location, IMO it should be to a bit above the SearchableSelect instance. Perhaps no auto-scroll at all, though? — Reply to this email directly, view it on GitHub <#50 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AC5RE6HU5QVBNHGUJC4DNST2PAASTAVCNFSM6AAAAABWX7T3USVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNBWG42DQMBYHA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[dricair]

I will try some options to check if I can scroll the list and not the window, it looks like some solutions exist. By the way I noticed another issue when using it in my application, but for now I have no clue: when `title` is changed to None, the text does not disappear while I would expect to show the placeholder instead. I will investigate it but for now I have no clue what causes it. Cedric Le lun. 10 févr. 2025 à 13:32, Cedric Airaud ***@***.***> a écrit :

…

Hi The behaviour I wanted was that when we open a select box, it makes the selected item visible. This is what happens in a standard Select component, although a normal select component can open on top instead of bottom (But I am not sure it's possible/wanted in this context). This has the effect of potentially scrolling the window to make it visible, I am not sure that there is another way to do it (I only order to make this element visible, not scroll the window). Cedric Le lun. 10 févr. 2025 à 02:49, Matthew Scheffel ***@***.***> a écrit : > First, thank you for your contribution. This looks like a good quality PR > overall. > > The behaviour of the example is jarring. When I click one of the selects, > the browser scrolls down to the selected item in the list, even if its the > last item. If we're going to move the scroll location, IMO it should be to > a bit above the SearchableSelect instance. Perhaps no auto-scroll at > all, though? > > — > Reply to this email directly, view it on GitHub > <#50 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AC5RE6HU5QVBNHGUJC4DNST2PAASTAVCNFSM6AAAAABWX7T3USVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNBWG42DQMBYHA> > . > You are receiving this because you authored the thread.Message ID: > ***@***.***> >

[dricair]

I was actually able to fix both issues.

[isosphere]

This video capture is as of d0d9cca; it feels pretty yanky.

Firefox 128.6.0esr

pr-50-yank-demo.small.mp4

[dricair]

Hum yes I agree it's strange, which browser is it? Unfortunately I don't think I know how to solve it. Cedric Le jeu. 13 févr. 2025 à 04:15, Matthew Scheffel ***@***.***> a écrit :

…

This video capture is as of d0d9cca <d0d9cca>; it feels pretty yanky. https://github.com/user-attachments/assets/62bb5d19-ce76-4c6b-ac9f-2fdb8ac5a901 — Reply to this email directly, view it on GitHub <#50 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AC5RE6BPWSV7XRLCW5STXE32PQE33AVCNFSM6AAAAABWX7T3USVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNJVGM2TSMRXGQ> . You are receiving this because you authored the thread.Message ID: ***@***.***> [image: isosphere]*isosphere* left a comment (isosphere/yew-bootstrap#50) <#50 (comment)> This video capture is as of d0d9cca <d0d9cca>; it feels pretty yanky. https://github.com/user-attachments/assets/62bb5d19-ce76-4c6b-ac9f-2fdb8ac5a901 — Reply to this email directly, view it on GitHub <#50 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AC5RE6BPWSV7XRLCW5STXE32PQE33AVCNFSM6AAAAABWX7T3USVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNJVGM2TSMRXGQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[dricair]

Actually one possibility could be to add a noautoscroll option when this behaviour is not wanted. Le jeu. 13 févr. 2025, 21:40, Cedric Airaud ***@***.***> a écrit :

…

Hum yes I agree it's strange, which browser is it? Unfortunately I don't think I know how to solve it. Cedric Le jeu. 13 févr. 2025 à 04:15, Matthew Scheffel ***@***.***> a écrit : > This video capture is as of d0d9cca > <d0d9cca>; > it feels pretty yanky. > > > https://github.com/user-attachments/assets/62bb5d19-ce76-4c6b-ac9f-2fdb8ac5a901 > > — > Reply to this email directly, view it on GitHub > <#50 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AC5RE6BPWSV7XRLCW5STXE32PQE33AVCNFSM6AAAAABWX7T3USVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNJVGM2TSMRXGQ> > . > You are receiving this because you authored the thread.Message ID: > ***@***.***> > [image: isosphere]*isosphere* left a comment (isosphere/yew-bootstrap#50) > <#50 (comment)> > > This video capture is as of d0d9cca > <d0d9cca>; > it feels pretty yanky. > > > https://github.com/user-attachments/assets/62bb5d19-ce76-4c6b-ac9f-2fdb8ac5a901 > > — > Reply to this email directly, view it on GitHub > <#50 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AC5RE6BPWSV7XRLCW5STXE32PQE33AVCNFSM6AAAAABWX7T3USVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNJVGM2TSMRXGQ> > . > You are receiving this because you authored the thread.Message ID: > ***@***.***> >

[dricair]

I added the noautoscroll option

[isosphere]

I added the noautoscroll option

It seems like it is set to default to false (i.e.: autoscroll enabled), and yet all of the examples no longer display the autoscroll behaviour. I've manually set it to false for Single, and yet it still does not autoscroll.

I would like this to default to disabled, but I think it is doing so right now against your intentions; does the feature still work? I can't seem to get it to.

[dricair]

I checked and for me it's still working correctly. If I set noautoscroll = {true} then it stops scrolling automatically. I find this behaviour really not intuitive because if an entry is selected at the end of the list, we need to manually scroll to the end to find the selected entry, so in my opinion it should scroll automatically, even if it can have small side effects depending on the browser.