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

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

carlopcarlop Posts: 37Questions: 9Answers: 1

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

Replies

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • carlopcarlop Posts: 37Questions: 9Answers: 1

    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

This discussion has been closed.