[RFE] enhance multi-select input fields

[fraenki]

Multiple users on IRC suggested that the multi-select input fields are inconvenient. These fields require that you hit either the ENTER or the TAB key after each value, otherwise the value will silently be discarded.

For example, a new user wanted to add something to "allowed subnets" in the web proxy:

After adding the value (as seen above), he clicked on "Apply" and kept wondering, why the value is not saved. He thought it was a bug in OPNsense. It was necessary to teach the user about the ENTER/TAB key thing.

The point is that there's no indication that the GUI works this way. Although the help message mentions the need to hit the ENTER key, it's still not obvious. Besides that, it's not useful to add this message to every help message. :) I wonder how many people hit "bugs" in OPNsense that are actually related to how this field type works.

A user suggested to add some kind of indication to the GUI. He provided the following examples:
https://select2.github.io/examples.html#tags
https://select2.github.io/examples.html#multiple

[Kimmax]

For me personally the https://select2.github.io/examples.html#tokenizer would have exactly indicated how to use the field, so take my +1 on that one

[AdSchellevis]

We're using this https://github.com/zellerda/Tokenize for the tokenizer at the moment, it seems that David has a new version too. I don't mind if we change the current tokenizer for a new one at some point, as long as we ditch the other version doing the same.
Select2 looks nice, I've not tested it, but it shouldn't be very complicated to integrate and test the pages currently using a tokenizer (proxy, ids, captive portal, netflow config).

[fichtner]

Whether or not something is replaced, the issue here recurs sporadically. I looked at the contained "solution" and it is essentially an open drop down field that gives perspective to the fact that the selection must be confirmed. This works best for preselection, but for arbitrary values it does not "fix" the issue of having to confirm the tag. In short, the issue will likely resurface in a slightly different form, but will definitely prompt further fixing.

Instead of only doing that, a focus-out of the input should try to confirm the tag or even more simply clear it to give a visual queue that it wasn't actually added.

[Kimmax]

Instead of only doing that, a focus-out of the input should try to confirm the tag or even more simply clear it to give a visual queue that it wasn't actually added.

this is (for me) the most important thing. The fact that I could type my value in, leave the field and press the "Apply" button, which than indicated some work being done suggests that everything is correct. There is no visual representation of the value not being confirmed until you leave the site and revisit, which presents you an empty field.

Catching a focus-out and checking if there is any unconfirmed value written in the field and marking the field invalid if so should clear things up

[fichtner]

Thanks for the clarification. 😊

[fichtner]

Nowadays while pondering about authentication server order we also need a way to reorder the entries per drag+drop.

[fichtner]

Updated to latest version, added the "focus out" auto-add for typed text so you can click apply directly... The new version also allows sorting so we should have what we need. Not sure when this hits 18.1.x, but feel free to try early:

# opnsense-patch 40f95a7

[Alex9779]

Even explicitly mentioned this seems not to work, at least for me.
I updated to 18.7.1 today, my primary issue is realted to #582 which should also be fixed with this but I am still not able to reorder items in those multi select boxes.
I tried Chrome and Edge...

[fichtner]

Slight misunderstanding. It supports sorting, but nobody has integrated it yet.

[Alex9779]

Ahhhh ok, thanks... Then I guess I have to wait... Or do it :P