Support the autocomplete attribute being set on the original <select> (#5839)

* Add test to ensure search autocomplete attribute is set

This adds a basic test to make sure that the `autocomplete` attribute
on the search box is set based on the value of the `autocomplete`
option that is passed in to Select2. This alows people to set the
`autocomplete` attribute on their `<select>`, which is valid
according to the spec, and have it copy over to the search box of
their Select2 instance.

* Add tests for options set by HTML atttributes

This adds some missing tests for the disabled and multiple attributes
and how they can be used to set the corresponding options within
Select2. This also adds tests for the new autocomplete option that
ensures it is properly synchronized based on the attribute being
set.

* Add support for the autocomplete attribute

This will now copy the `autocomplete` attribute (based on the current
state of the `autocomplete` DOM property) from the `<select>` to
any search boxes that are used by Select2. This is necessary to
both handle cases where people do not want the autocomplete
disabled, as well as handling cases where people are looking to set
a custom autocomplete which will assist users when searching.

This still maintains backwards compatibility with the `autocomplete`
option being set to `off` by default. It also allows the
`autocomplete` option to be set through the standard Select2 options
to override the `autocomplete` attribute if it is present.

This does not follow the precedent set by the `disabled` and `multiple`
options where the value is synchronized back to the original
`<select>` when it is overridden by the options. This is because it
would break backwards compatibility because the default state of
the `autocomplete` property is a blank string ('') instead of `off`
which is what Select2 uses.

* Skip autocomplete attr test when not supported

Not all browsers, including older version of PhantomJS, support
the `autocomplete` attribute when it is set on a `<select>` element.

src/js/select2/defaults.js

@@ -296,6 +296,7 @@ define([
 
     this.defaults = {
       amdLanguageBase: './i18n/',
+      autocomplete: 'off',
       closeOnSelect: true,
       debug: false,
       dropdownAutoWidth: false,

src/js/select2/dropdown/search.js

@@ -9,7 +9,7 @@ define([
     var $search = $(
       '<span class="select2-search select2-search--dropdown">' +
         '<input class="select2-search__field" type="search" tabindex="-1"' +
-        ' autocomplete="off" autocorrect="off" autocapitalize="none"' +
+        ' autocorrect="off" autocapitalize="none"' +
         ' spellcheck="false" role="searchbox" aria-autocomplete="list" />' +
       '</span>'
     );
@@ -17,6 +17,8 @@ define([
     this.$searchContainer = $search;
     this.$search = $search.find('input');
 
+    this.$search.prop('autocomplete', this.options.get('autocomplete'));
+
     $rendered.prepend($search);
 
     return $rendered;

src/js/select2/options.js

@@ -28,6 +28,10 @@ define([
       this.options.disabled = $e.prop('disabled');
     }
 
+    if (this.options.autocomplete == null && $e.prop('autocomplete')) {
+      this.options.autocomplete = $e.prop('autocomplete');
+    }
+
     if (this.options.dir == null) {
       if ($e.prop('dir')) {
         this.options.dir = $e.prop('dir');

src/js/select2/selection/search.js

@@ -11,7 +11,7 @@ define([
     var $search = $(
       '<li class="select2-search select2-search--inline">' +
         '<input class="select2-search__field" type="search" tabindex="-1"' +
-        ' autocomplete="off" autocorrect="off" autocapitalize="none"' +
+        ' autocorrect="off" autocapitalize="none"' +
         ' spellcheck="false" role="searchbox" aria-autocomplete="list" />' +
       '</li>'
     );
@@ -19,6 +19,8 @@ define([
     this.$searchContainer = $search;
     this.$search = $search.find('input');
 
+    this.$search.prop('autocomplete', this.options.get('autocomplete'));
+
     var $rendered = decorated.call(this);
 
     this._transferTabIndex();

tests/dropdown/search-tests.js

@@ -0,0 +1,49 @@
+module('Dropdown - Search');
+
+var Dropdown = require('select2/dropdown');
+var DropdownSearch = Utils.Decorate(
+  Dropdown,
+  require('select2/dropdown/search')
+);
+
+var $ = require('jquery');
+var Options = require('select2/options');
+var Utils = require('select2/utils');
+
+var options = new Options({});
+
+test('search box defaults autocomplete to off', function (assert) {
+  var $select = $('#qunit-fixture .single');
+
+  var dropdown = new DropdownSearch($select, options);
+  var $dropdown = dropdown.render();
+
+  var container = new MockContainer();
+  dropdown.bind(container, $('<span></span>'));
+
+  assert.equal(
+    $dropdown.find('input').attr('autocomplete'),
+    'off',
+    'The search box has autocomplete disabled'
+  );
+});
+
+test('search box sets autocomplete from options', function (assert) {
+  var $select = $('#qunit-fixture .single');
+
+  var autocompleteOptions = new Options({
+    autocomplete: 'country-name'
+  });
+
+  var dropdown = new DropdownSearch($select, autocompleteOptions);
+  var $dropdown = dropdown.render();
+
+  var container = new MockContainer();
+  dropdown.bind(container, $('<span></span>'));
+
+  assert.equal(
+    $dropdown.find('input').attr('autocomplete'),
+    'country-name',
+    'The search box sets the right autocomplete attribute'
+  );
+});

tests/options/element-tests.js

@@ -0,0 +1,113 @@
+module('Options - Copying from element');
+
+var $ = require('jquery');
+
+var Options = require('select2/options');
+
+test('copies disabled attribute when set', function (assert) {
+  var $test = $('<select disabled></select>');
+
+  var options = new Options({}, $test);
+
+  assert.ok(options.get('disabled'));
+});
+
+test('does not copy disabled attribute when not set', function (assert) {
+  var $test = $('<select></select>');
+
+  var options = new Options({}, $test);
+
+  assert.ok(!options.get('disabled'));
+});
+
+test('disabled attribute does not override disable option', function (assert) {
+  var $test = $('<select disabled></select>');
+
+  var options = new Options({
+    disabled: false
+  }, $test);
+
+  assert.ok(!options.get('disabled'));
+});
+
+test('disabled option is synchronized back', function (assert) {
+  var $test = $('<select disabled></select>');
+
+  assert.ok($test.prop('disabled'));
+
+  var options = new Options({
+    disabled: false
+  }, $test);
+
+  assert.ok(!$test.prop('disabled'));
+});
+
+test('copies multiple attribute when set', function (assert) {
+  var $test = $('<select multiple></select>');
+
+  var options = new Options({}, $test);
+
+  assert.ok(options.get('multiple'));
+});
+
+test('does not copy multiple attribute when not set', function (assert) {
+  var $test = $('<select></select>');
+
+  var options = new Options({}, $test);
+
+  assert.ok(!options.get('multiple'));
+});
+
+test('multiple attribute does not override multiple option', function (assert) {
+  var $test = $('<select multiple></select>');
+
+  var options = new Options({
+    multiple: false
+  }, $test);
+
+  assert.ok(!options.get('multiple'));
+});
+
+test('multiple option is synchronized back', function (assert) {
+  var $test = $('<select multiple></select>');
+
+  assert.ok($test.prop('multiple'));
+
+  var options = new Options({
+    multiple: false
+  }, $test);
+
+  assert.ok(!$test.prop('multiple'));
+});
+
+test('copies autocomplete attribute when set', function (assert) {
+  var $test = $('<select autocomplete="country-name"></select>');
+
+  if ($test.prop('autocomplete') !== 'country-name') {
+    // Browser does not support the autocomplete attribute on a select
+    assert.ok(true);
+    return;
+  }
+
+  var options = new Options({}, $test);
+
+  assert.equal(options.get('autocomplete'), 'country-name');
+});
+
+test('does not copy autocomplete attribute when not set', function (assert) {
+  var $test = $('<select></select>');
+
+  var options = new Options({}, $test);
+
+  assert.equal(options.get('autocomplete'), 'off');
+});
+
+test('autocomplete attribute does not override option', function (assert) {
+  var $test = $('<select autocomplete="country-name"></select>');
+
+  var options = new Options({
+    autocomplete: 'organization'
+  }, $test);
+
+  assert.ok(options.get('autocomplete'), 'organization');
+});

tests/selection/search-tests.js

@@ -275,3 +275,47 @@ test('search box with text should not close dropdown', function (assert) {
   $search.val('test');
   $search.trigger('click');
 });
+
+test('search box defaults autocomplete to off', function (assert) {
+  var $select = $('#qunit-fixture .multiple');
+
+  var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
+  var selection = new CustomSelection($select, options);
+  var $selection = selection.render();
+
+  var container = new MockContainer();
+  selection.bind(container, $('<span></span>'));
+
+  // Update the selection so the search is rendered
+  selection.update([]);
+
+  assert.equal(
+    $selection.find('input').attr('autocomplete'),
+    'off',
+    'The search box has autocomplete disabled'
+  );
+});
+
+test('search box sets autocomplete from options', function (assert) {
+  var $select = $('#qunit-fixture .multiple');
+
+  var autocompleteOptions = new Options({
+    autocomplete: 'country-name'
+  });
+
+  var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
+  var selection = new CustomSelection($select, autocompleteOptions);
+  var $selection = selection.render();
+
+  var container = new MockContainer();
+  selection.bind(container, $('<span></span>'));
+
+  // Update the selection so the search is rendered
+  selection.update([]);
+
+  assert.equal(
+    $selection.find('input').attr('autocomplete'),
+    'country-name',
+    'The search box sets the right autocomplete attribute'
+  );
+});

tests/unit-jq1.html

@@ -71,12 +71,14 @@
     <script src="dropdown/dropdownCss-tests.js" type="text/javascript"></script>
     <script src="dropdown/dropdownParent-tests.js" type="text/javascript"></script>
     <script src="dropdown/positioning-tests.js" type="text/javascript"></script>
+    <script src="dropdown/search-tests.js" type="text/javascript"></script>
     <script src="dropdown/search-a11y-tests.js" type="text/javascript"></script>
     <script src="dropdown/selectOnClose-tests.js" type="text/javascript"></script>
     <script src="dropdown/stopPropagation-tests.js" type="text/javascript"></script>
 
     <script src="options/ajax-tests.js" type="text/javascript"></script>
     <script src="options/data-tests.js" type="text/javascript"></script>
+    <script src="options/element-tests.js" type="text/javascript"></script>
     <script src="options/translation-tests.js" type="text/javascript"></script>
     <script src="options/width-tests.js" type="text/javascript"></script>
 

tests/unit-jq2.html

@@ -71,12 +71,14 @@
     <script src="dropdown/dropdownCss-tests.js" type="text/javascript"></script>
     <script src="dropdown/dropdownParent-tests.js" type="text/javascript"></script>
     <script src="dropdown/positioning-tests.js" type="text/javascript"></script>
+    <script src="dropdown/search-tests.js" type="text/javascript"></script>
     <script src="dropdown/search-a11y-tests.js" type="text/javascript"></script>
     <script src="dropdown/selectOnClose-tests.js" type="text/javascript"></script>
     <script src="dropdown/stopPropagation-tests.js" type="text/javascript"></script>
 
     <script src="options/ajax-tests.js" type="text/javascript"></script>
     <script src="options/data-tests.js" type="text/javascript"></script>
+    <script src="options/element-tests.js" type="text/javascript"></script>
     <script src="options/translation-tests.js" type="text/javascript"></script>
     <script src="options/width-tests.js" type="text/javascript"></script>
 

tests/unit-jq3.html

@@ -71,12 +71,14 @@
     <script src="dropdown/dropdownCss-tests.js" type="text/javascript"></script>
     <script src="dropdown/dropdownParent-tests.js" type="text/javascript"></script>
     <script src="dropdown/positioning-tests.js" type="text/javascript"></script>
+    <script src="dropdown/search-tests.js" type="text/javascript"></script>
     <script src="dropdown/search-a11y-tests.js" type="text/javascript"></script>
     <script src="dropdown/selectOnClose-tests.js" type="text/javascript"></script>
     <script src="dropdown/stopPropagation-tests.js" type="text/javascript"></script>
 
     <script src="options/ajax-tests.js" type="text/javascript"></script>
     <script src="options/data-tests.js" type="text/javascript"></script>
+    <script src="options/element-tests.js" type="text/javascript"></script>
     <script src="options/translation-tests.js" type="text/javascript"></script>
     <script src="options/width-tests.js" type="text/javascript"></script>