editor plug-ins select2 - separator and onFocus options not working

carlop

Hi, the demo can be viewed at
https://nfctech.eu/datatables/editor-select2-bootstrap.html
and the used code is

{
            "label": "AREA*:",
            "name": "area",
            "type": "select2",
            "options": [
              "Francia",
              "Nord Italia",
              "Russia",
              "Americhe"
            ],
            "opts": {
              "multiple": true,
              "placeholder": "Seleziona un'area di competenza",
              "allowClear": true,
              "minimumResultsForSearch": "Infinity",
              "theme": "bootstrap"
            },
            "onFocus": "open",
            "separator": ", "
          }

The problems are:
1. When tabbing and the select2 get focus it does not open despite the onFocus option
2. Even if the separator option includes a white space, the final result in datatables is that the chosen options are only separated by the comma and the white space is ignored
Any suggestions?
Thanks

allan

1) This is an interesting one. If you use a synthetic focus event I believe it will work: editor.field('nazione').focus();. But using a manual focus (keyboard or mouse), the onFocus handler in Editor doesn't actually trigger.

For the moment do something like:

editor.field('nazione').inst().on("focus", function (e) {
    editor.field('nazione').input().select2("open");
});

which I think should work around this.

2) It looks like the data is being submitted to the server with the space:

data[0][area]:Francia, Nord Italia

Possibly something on the server-side is stripping it out? I'm getting an error on the page when it is loading data at the moment so I can't be sure.

Regards,
Allan

carlop

Hi Allan,
concerning point 1) I solved with this code snippet taken from
https://github.com/select2/select2/issues/4025

$(document).on('focus', '.select2.select2-container', function (e) {
  // only open on original attempt - close focus event should not fire open
  if (e.originalEvent && $(this).find(".select2-selection--single").length > 0) {
    $(this).siblings('select').select2('open');
  } 
});

It is valid for all the selects.
Concerning point 2), we will see if we can prepare a demo that is fully accessible to the public.
Thanks