Fixed broken tags and tokenizer options of select2. Regression of #5038

With the change of data adapter, we have configured adapters for tags and tokenizers.
We also renamed the method onDemandLoad to showOnScroll to avoid confusion.

web/pgadmin/browser/static/js/node.ui.js

@@ -93,57 +93,6 @@ define([
     );
   });
 
-  /* Define on demand loading of dropdown items.
-   * This also requires ajax option of select2 to be set.
-   * The trick is, ajax: {} will also work even if you're actually not
-   * using ajax.
-   */
-  $.fn.select2.amd.define('select2/onDemandDataAdapter', [
-    'select2/utils',
-    'select2/data/select',
-  ], function (Utils, SelectAdapter) {
-
-    function onDemandDataAdapter ($element, options) {
-      this.$element = $element;
-      this.options = options;
-    }
-    Utils.Extend(onDemandDataAdapter, SelectAdapter);
-    onDemandDataAdapter.prototype.query = function (params, callback) {
-      var data = [];
-      var self = this;
-      if (!params.page) {
-        params.page = 1;
-      }
-      var pageSize = 20;
-
-      var $options = this.$element.children();
-      $options.each(function () {
-        var $option = $(this);
-
-        if (!$option.is('option') && !$option.is('optgroup')) {
-          return;
-        }
-
-        var option = self.item($option);
-
-        var matches = self.matches(params, option);
-
-        if (matches !== null) {
-          data.push(matches);
-        }
-      });
-
-      callback({
-        results: data.slice((params.page - 1) * pageSize, params.page * pageSize),
-        pagination: {
-          more: data.length >= params.page * pageSize,
-        },
-      });
-    };
-
-    return onDemandDataAdapter;
-  });
-
   /*
    * NodeAjaxOptionsControl
    *   This control will fetch the options required to render the select

web/pgadmin/static/js/backform.pgadmin.js

@@ -10,10 +10,10 @@
 define([
   'sources/gettext', 'underscore', 'jquery',
   'backbone', 'backform', 'backgrid', 'codemirror', 'sources/sqleditor_utils',
-  'sources/keyboard_shortcuts', 'sources/window',
+  'sources/keyboard_shortcuts', 'sources/window', 'sources/select2/configure_show_on_scroll',
   'spectrum', 'pgadmin.backgrid', 'select2', 'bootstrap.toggle',
 ], function(gettext, _, $, Backbone, Backform, Backgrid, CodeMirror,
-  SqlEditorUtils, keyboardShortcuts, pgWindow) {
+  SqlEditorUtils, keyboardShortcuts, pgWindow, configure_show_on_scroll) {
 
   var pgAdmin = (window.pgAdmin = window.pgAdmin || {}),
     pgBrowser = pgAdmin.Browser;
@@ -2190,7 +2190,7 @@ define([
         emptyOptions: false,
         preserveSelectionOrder: false,
         isDropdownParent: false,
-        onDemandLoad: true,
+        showOnScroll: true,
       });
 
       // Evaluate the disabled, visible, and required option
@@ -2249,15 +2249,8 @@ define([
         select2Opts.data = data.rawValue;
       }
 
-      /* Set the pgadmin adapter for on demand load.
-       * Setting empty ajax option will enable infinite scrolling.
-       */
-      if(select2Opts.onDemandLoad) {
-        select2Opts.dataAdapter = $.fn.select2.amd.require('select2/onDemandDataAdapter');
-        if(_.isUndefined(select2Opts.ajax)) {
-          select2Opts.ajax = {};
-        }
-      }
+      /* Configure show on scroll if required */
+      select2Opts = configure_show_on_scroll.default(select2Opts);
 
       this.$sel = this.$el.find('select').select2(select2Opts);
 

web/pgadmin/static/js/backgrid.pgadmin.js

@@ -9,11 +9,11 @@
 
 define([
   'sources/gettext', 'underscore', 'jquery', 'backbone', 'backform', 'backgrid', 'alertify',
-  'moment', 'bignumber', 'sources/utils', 'sources/keyboard_shortcuts',
+  'moment', 'bignumber', 'sources/utils', 'sources/keyboard_shortcuts', 'sources/select2/configure_show_on_scroll',
   'bootstrap.datetimepicker', 'backgrid.filter', 'bootstrap.toggle',
 ], function(
   gettext, _, $, Backbone, Backform, Backgrid, Alertify, moment, BigNumber,
-  commonUtils, keyboardShortcuts
+  commonUtils, keyboardShortcuts, configure_show_on_scroll
 ) {
   /*
    * Add mechanism in backgrid to render different types of cells in
@@ -883,7 +883,7 @@ define([
         select2_opts = _.extend({
           openOnEnter: false,
           multiple: false,
-          onDemandLoad: true,
+          showOnScroll: true,
         }, self.defaults.select2,
         (col.select2 || {})
         ),
@@ -944,12 +944,9 @@ define([
         select2_opts['placeholder'] = '';
       }
 
-      if(select2_opts.onDemandLoad) {
-        select2_opts.dataAdapter = $.fn.select2.amd.require('select2/onDemandDataAdapter');
-        if(_.isUndefined(select2_opts.ajax)) {
-          select2_opts.ajax = {};
-        }
-      }
+      /* Configure show on scroll if required */
+      select2_opts = configure_show_on_scroll.default(select2_opts);
+
       // Initialize select2 control.
       this.$sel = this.$select.select2(select2_opts);
 

web/pgadmin/static/js/select2/configure_show_on_scroll.js

@@ -0,0 +1,101 @@
+import 'select2';
+import $ from 'jquery';
+import _ from 'underscore';
+
+export default function (options) {
+  if(options.showOnScroll) {
+    let Utils = $.fn.select2.amd.require('select2/utils');
+
+    /* Define on scroll showing of dropdown items.
+     * This also requires ajax option of select2 to be set.
+     * The trick is, ajax: {} will also work even if you're actually not
+     * using ajax.
+     */
+    let ScrollDataAdapter = function ($element, options) {
+      this.$element = $element;
+      this.options = options;
+      this._dataToConvert = options.get('data') || [];
+    };
+
+    let BaseAdapter = null;
+    if(options.data != null) {
+      BaseAdapter = $.fn.select2.amd.require('select2/data/array');
+    } else {
+      BaseAdapter = $.fn.select2.amd.require('select2/data/select');
+    }
+    Utils.Extend(ScrollDataAdapter, BaseAdapter);
+
+    ScrollDataAdapter.prototype.query = function (params, callback) {
+      var data = [];
+      var self = this;
+      if (!params.page) {
+        params.page = 1;
+      }
+      var pageSize = 20;
+
+      var $options = this.$element.children();
+      $options.each(function () {
+        var $option = $(this);
+
+        if (!$option.is('option') && !$option.is('optgroup')) {
+          return;
+        }
+
+        var option = self.item($option);
+
+        var matches = self.matches(params, option);
+
+        if (matches !== null) {
+          data.push(matches);
+        }
+      });
+
+      callback({
+        results: data.slice((params.page - 1) * pageSize, params.page * pageSize),
+        pagination: {
+          more: data.length >= params.page * pageSize,
+        },
+      });
+    };
+
+    if (options.minimumInputLength > 0) {
+      ScrollDataAdapter = Utils.Decorate(
+        ScrollDataAdapter,
+        $.fn.select2.amd.require('select2/data/minimumInputLength')
+      );
+    }
+
+    if (options.maximumInputLength > 0) {
+      ScrollDataAdapter = Utils.Decorate(
+        ScrollDataAdapter,
+        $.fn.select2.amd.require('select2/data/maximumInputLength')
+      );
+    }
+
+    if (options.maximumSelectionLength > 0) {
+      ScrollDataAdapter = Utils.Decorate(
+        ScrollDataAdapter,
+        $.fn.select2.amd.require('select2/data/maximumSelectionLength')
+      );
+    }
+
+    if (options.tags) {
+      ScrollDataAdapter = Utils.Decorate(ScrollDataAdapter, $.fn.select2.amd.require('select2/data/tags'));
+    }
+
+    if (options.tokenSeparators != null || options.tokenizer != null) {
+      ScrollDataAdapter = Utils.Decorate(
+        ScrollDataAdapter,
+        $.fn.select2.amd.require('select2/data/tokenizer')
+      );
+    }
+
+    options.dataAdapter = ScrollDataAdapter;
+
+    /* Setting empty ajax option will enable infinite scrolling. */
+    if(_.isUndefined(options.ajax)) {
+      options.ajax = {};
+    }
+  }
+  return options;
+}