[Feature Request] Select2 focus to open the list

[Adesin-fr]

Feature Request

What's the feature you think Backpack should have?

When I'm on a create/update form, with some text fields and a Select2 field in betweens, I can navigate trhu the text fields with the TAB key. This behavior is very natural to users who are fluent with IT. BUT, when the Select2 field gets the focus, the "typing box" field doesn't show, and the list doesn't pop out. The user need to click on the "fake text" field to make the Select2 field show.

Have you already implemented a prototype solution, for your own project?

Not yet. I'm pretty sure that some JS would do the trick.

Do you see this as a core feature or an add-on?

This should be a core feature. Using a form with TAB is something that should work by design in any application.

[welcome[bot]]

Hello there! Thanks for opening your first issue on this repo!

Just a heads-up: Here at Backpack we use Github Issues only for tracking bugs. Talk about new features is also acceptable. This helps a lot in keeping our focus on improving Backpack. If you issue is not a bug/feature, please help us out by closing the issue yourself and posting in the appropriate medium (see below). If you're not sure where it fits, it's ok, a community member will probably reply to help you with that.

Backpack communication channels:

• Bug Reports, Feature Requests - Github Issues (here);
• Quick help (How do I do X) - Gitter Chatroom;
• Long questions (I have done X and Y and it won't do Z wtf) - Stackoverflow, using the backpack-for-laravel tag;
• Showing off something you've made, asking for opinion on Backpack/Laravel matters - Reddit;

Please keep in mind Backpack offers no official / paid support. Whatever help you receive here, on Gitter, Slack or Stackoverflow is thanks to our awesome awesome community members, who give up some of their time to help their peers. If you want to join our community, just start pitching in. We take pride in being a welcoming bunch.

Thank you!

-- Justin Case The Backpack Robot

[Adesin-fr]

Edit : It seems that the Select2 is in fact based on the Select2 Jquery library ? If yes, this could help : https://stackoverflow.com/questions/20989458/select2-open-dropdown-on-focus

[tabacitu]

Totally agree - it's something that keeps annoying me sometimes too. It's one of the often-used fields, so improving this bit would do a lot to improve the UX for keyboard-form-fillers like us.

Thanks for opening an issue for this @LemarinelNet - I've prioritised it, it's now on our to-do list. If you have any ideas about how to do this, it'll definitely move the issue forward.

Cheers!

[Adesin-fr]

Haven't look for any solution, but while searching for an "auto-complete-able" select component for some UI, I've came accross this : https://selectize.github.io/selectize.js/ It's not a way to add focus to the current Select2 component, but a good candidate for replacement : It does supports everything (as far as I know) that Select2 does, support an "open on focus" option, add elements on the fly, populate with ajax, multi-columns (allow to display multiple fields of a same record !! nice for "browse customers" select which could show name, surname, city, ...), easy to code, and so on ...

However, I would understand that replacing the Select2 component with another one might not be a choice....If not, perhaps creating a new component would be a choice, but IMHO, it would make select2 redundant compared to Selectize, which does the exact same job !?

I think that if the choice would be mine, I would drop the Select2 component and replace it, even while keeping the same name ;)

[Adesin-fr]

I had a further look into Selectize, and did not managed to make it work ! So I stayed with Select2. Now I have to look if I can make work the focus event ;)

[tabacitu]

Ugh - it looks like it's not as simple as just flicking a Select2 switch - https://stackoverflow.com/questions/20989458/select2-open-dropdown-on-focus So now I'm wondering if the functionality itself is worth the added complexity to the select2 fields. If it's worth the trouble.

To be fair, it does work to move through select2 fields with tab (at least in my experience), what's incovenient is that the dropdown doesn't show on focus, so can only select an item from the dropdown if you know what item you want beforehand. Which yeah now that I mention it it's a little inconvenient...

[anandphulwani]

I had a further look into Selectize, and did not managed to make it work ! So I stayed with Select2. Now I have to look if I can make work the focus event ;)

Can you explain what problems you have faced, i was thinking to integrate selectize.js

[anandphulwani]

Totally agree - it's something that keeps annoying me sometimes too. It's one of the often-used fields, so improving this bit would do a lot to improve the UX for keyboard-form-fillers like us.

Thanks for opening an issue for this @LemarinelNet - I've prioritised it, it's now on our to-do list. If you have any ideas about how to do this, it'll definitely move the issue forward.

Cheers!

@tabacitu I want you to check this out and tell me whether this looks promising or not?

Thanks, Anand

[tabacitu]

It looks like it's exactly what's needed from a UX perspective yes!

Take note though:

• we do have to think long and hard before we replace Select2 because we have 6-8 fields using it, some of them very complicated, and very heavily used (like 99% perhaps);
• for the next major Backpack version (fall-winter 2021), we're probably going to upgrade the Bootstrap version too; and Bootstrap 5 removed the jQuery dependency... Which means we could do that too - we can rewrite our JS code to not use jQuery and then the developer can choose whether to use it or not - just like Vue.JS, just like React; just uncomment one line in the config; The biggest roadblock to removing the strict jQuery dependency in Backpack though... would be how much people use Select2; because even if we remove jQuery everywhere else, most forms have Select2 fields, so then most forms would load jQuery... which you know... defeats the purpose; ideally we would find a dropdown input that is vanilla JS (with no jQuery dependency), but that would also be able to pre-populate the list like selectize does; unfortunately, it looks like there are very few good options... I'll keep looking, but please let me know if you know/find anything that fits this description; if we are to rewrite some huge fields we'd better rewrite them using something that we can keep for a lot of years...

[jcastroa87]

hello everyone @Adesin-fr @anandphulwani @tabacitu i will be glad to take this task please let me know if it just require open select2 when focus is make, i make a small experiment with this behaviour in Backpack crud, let me know if this is how you expect this work and i will PR this.

https://recordit.co/uVSY6nXCxd

Cheers.

[pxpm]

Hey @jorgetwgroup I think @maurohmartinez tackled this issue in a previous PR where we added support for focus in repeatable too. #4491

[jcastroa87]

Hi @pxpm ups, i try in main and didn't find this behavior on focus select2 in normal forms, this mean focus select2 in any position, not just in first place, maybe i miss something and i try to cover this on this branch https://github.com/Laravel-Backpack/PRO/tree/select2-open-on-focus i only think need to handle new parameter as default true.

To use it, add to any select2

'openOnFocus' => true,

Let me know.

Cheers.

[tabacitu]

@jorgetwgroup , if you want Pedro to take a look at your solution, please

• create a PR from your branch to main; that way he can take a look at the code and evaluate the impact;
• assign him to that PR; that way he knows the ball is in his court;
• move that PR to "Needs Review";

Thanks!

[jcastroa87]

Done.