Copy option title to results and selection

This copies the `title` attribute of `<option>` and `<optgroup>`
tags to the `title` attribute of the options within the results
list and the selection when it is rendered.

For single selections, the `text` property on the data objects will
be used if the `title` attribute is not present, which will allow
for long names to still be viewable if they overflow the selection
container.

This also fixes a potential issue in browsers that did not support
the non-standard `innerText` property on DOM nodes.  As the
`textContent` property is the standard, and it is supported on
IE 9+, we try to set that before falling back to `innerText`.

This closes https://github.com/select2/select2/issues/2530.
This closes https://github.com/select2/select2/pull/2889.

dist/js/select2.amd.full.js

@@ -415,6 +415,10 @@ define('select2/results',[
       option.id = data._resultId;
     }
 
+    if (data.title) {
+      option.title = data.title;
+    }
+
     if (data.children) {
       attrs.role = 'group';
       attrs['aria-label'] = data.text;
@@ -991,8 +995,9 @@ define('select2/selection/single',[
 
     var formatted = this.display(selection);
 
-    this.$selection.find('.select2-selection__rendered')
+    var $rendered = this.$selection.find('.select2-selection__rendered');
-      .empty().append(formatted);
+    $rendered.empty().append(formatted);
+    $rendered.prop('title', selection.title || selection.text);
   };
 
   return SingleSelection;
@@ -1085,6 +1090,8 @@ define('select2/selection/multiple',[
       var $selection = this.selectionContainer();
 
       $selection.append(formatted);
+      $selection.prop('title', selection.title);
+
       $selection.data('data', selection);
 
       $selections.push($selection);
@@ -2486,7 +2493,12 @@ define('select2/data/select',[
       option.label = data.text;
     } else {
       option = document.createElement('option');
-      option.innerText = data.text;
+
+      if (option.textContent !== undefined) {
+        option.textContent = data.text;
+      } else {
+        option.innerText = data.text;
+      }
     }
 
     if (data.id) {
@@ -2501,6 +2513,10 @@ define('select2/data/select',[
       option.selected = true;
     }
 
+    if (data.title) {
+      option.title = data.title;
+    }
+
     var $option = $(option);
 
     var normalizedData = this._normalizeItem(data);
@@ -2526,12 +2542,14 @@ define('select2/data/select',[
         id: $option.val(),
         text: $option.html(),
         disabled: $option.prop('disabled'),
-        selected: $option.prop('selected')
+        selected: $option.prop('selected'),
+        title: $option.prop('title')
       };
     } else if ($option.is('optgroup')) {
       data = {
         text: $option.prop('label'),
-        children: []
+        children: [],
+        title: $option.prop('title')
       };
 
       var $children = $option.children('option');

dist/js/select2.amd.js

@@ -415,6 +415,10 @@ define('select2/results',[
       option.id = data._resultId;
     }
 
+    if (data.title) {
+      option.title = data.title;
+    }
+
     if (data.children) {
       attrs.role = 'group';
       attrs['aria-label'] = data.text;
@@ -991,8 +995,9 @@ define('select2/selection/single',[
 
     var formatted = this.display(selection);
 
-    this.$selection.find('.select2-selection__rendered')
+    var $rendered = this.$selection.find('.select2-selection__rendered');
-      .empty().append(formatted);
+    $rendered.empty().append(formatted);
+    $rendered.prop('title', selection.title || selection.text);
   };
 
   return SingleSelection;
@@ -1085,6 +1090,8 @@ define('select2/selection/multiple',[
       var $selection = this.selectionContainer();
 
       $selection.append(formatted);
+      $selection.prop('title', selection.title);
+
       $selection.data('data', selection);
 
       $selections.push($selection);
@@ -2486,7 +2493,12 @@ define('select2/data/select',[
       option.label = data.text;
     } else {
       option = document.createElement('option');
-      option.innerText = data.text;
+
+      if (option.textContent !== undefined) {
+        option.textContent = data.text;
+      } else {
+        option.innerText = data.text;
+      }
     }
 
     if (data.id) {
@@ -2501,6 +2513,10 @@ define('select2/data/select',[
       option.selected = true;
     }
 
+    if (data.title) {
+      option.title = data.title;
+    }
+
     var $option = $(option);
 
     var normalizedData = this._normalizeItem(data);
@@ -2526,12 +2542,14 @@ define('select2/data/select',[
         id: $option.val(),
         text: $option.html(),
         disabled: $option.prop('disabled'),
-        selected: $option.prop('selected')
+        selected: $option.prop('selected'),
+        title: $option.prop('title')
       };
     } else if ($option.is('optgroup')) {
       data = {
         text: $option.prop('label'),
-        children: []
+        children: [],
+        title: $option.prop('title')
       };
 
       var $children = $option.children('option');

dist/js/select2.full.js

@@ -853,6 +853,10 @@ define('select2/results',[
       option.id = data._resultId;
     }
 
+    if (data.title) {
+      option.title = data.title;
+    }
+
     if (data.children) {
       attrs.role = 'group';
       attrs['aria-label'] = data.text;
@@ -1429,8 +1433,9 @@ define('select2/selection/single',[
 
     var formatted = this.display(selection);
 
-    this.$selection.find('.select2-selection__rendered')
+    var $rendered = this.$selection.find('.select2-selection__rendered');
-      .empty().append(formatted);
+    $rendered.empty().append(formatted);
+    $rendered.prop('title', selection.title || selection.text);
   };
 
   return SingleSelection;
@@ -1523,6 +1528,8 @@ define('select2/selection/multiple',[
       var $selection = this.selectionContainer();
 
       $selection.append(formatted);
+      $selection.prop('title', selection.title);
+
       $selection.data('data', selection);
 
       $selections.push($selection);
@@ -2924,7 +2931,12 @@ define('select2/data/select',[
       option.label = data.text;
     } else {
       option = document.createElement('option');
-      option.innerText = data.text;
+
+      if (option.textContent !== undefined) {
+        option.textContent = data.text;
+      } else {
+        option.innerText = data.text;
+      }
     }
 
     if (data.id) {
@@ -2939,6 +2951,10 @@ define('select2/data/select',[
       option.selected = true;
     }
 
+    if (data.title) {
+      option.title = data.title;
+    }
+
     var $option = $(option);
 
     var normalizedData = this._normalizeItem(data);
@@ -2964,12 +2980,14 @@ define('select2/data/select',[
         id: $option.val(),
         text: $option.html(),
         disabled: $option.prop('disabled'),
-        selected: $option.prop('selected')
+        selected: $option.prop('selected'),
+        title: $option.prop('title')
       };
     } else if ($option.is('optgroup')) {
       data = {
         text: $option.prop('label'),
-        children: []
+        children: [],
+        title: $option.prop('title')
       };
 
       var $children = $option.children('option');

dist/js/select2.js

@@ -853,6 +853,10 @@ define('select2/results',[
       option.id = data._resultId;
     }
 
+    if (data.title) {
+      option.title = data.title;
+    }
+
     if (data.children) {
       attrs.role = 'group';
       attrs['aria-label'] = data.text;
@@ -1429,8 +1433,9 @@ define('select2/selection/single',[
 
     var formatted = this.display(selection);
 
-    this.$selection.find('.select2-selection__rendered')
+    var $rendered = this.$selection.find('.select2-selection__rendered');
-      .empty().append(formatted);
+    $rendered.empty().append(formatted);
+    $rendered.prop('title', selection.title || selection.text);
   };
 
   return SingleSelection;
@@ -1523,6 +1528,8 @@ define('select2/selection/multiple',[
       var $selection = this.selectionContainer();
 
       $selection.append(formatted);
+      $selection.prop('title', selection.title);
+
       $selection.data('data', selection);
 
       $selections.push($selection);
@@ -2924,7 +2931,12 @@ define('select2/data/select',[
       option.label = data.text;
     } else {
       option = document.createElement('option');
-      option.innerText = data.text;
+
+      if (option.textContent !== undefined) {
+        option.textContent = data.text;
+      } else {
+        option.innerText = data.text;
+      }
     }
 
     if (data.id) {
@@ -2939,6 +2951,10 @@ define('select2/data/select',[
       option.selected = true;
     }
 
+    if (data.title) {
+      option.title = data.title;
+    }
+
     var $option = $(option);
 
     var normalizedData = this._normalizeItem(data);
@@ -2964,12 +2980,14 @@ define('select2/data/select',[
         id: $option.val(),
         text: $option.html(),
         disabled: $option.prop('disabled'),
-        selected: $option.prop('selected')
+        selected: $option.prop('selected'),
+        title: $option.prop('title')
       };
     } else if ($option.is('optgroup')) {
       data = {
         text: $option.prop('label'),
-        children: []
+        children: [],
+        title: $option.prop('title')
       };
 
       var $children = $option.children('option');

src/js/select2/data/select.js

@@ -155,7 +155,12 @@ define([
       option.label = data.text;
     } else {
       option = document.createElement('option');
-      option.innerText = data.text;
+
+      if (option.textContent !== undefined) {
+        option.textContent = data.text;
+      } else {
+        option.innerText = data.text;
+      }
     }
 
     if (data.id) {
@@ -170,6 +175,10 @@ define([
       option.selected = true;
     }
 
+    if (data.title) {
+      option.title = data.title;
+    }
+
     var $option = $(option);
 
     var normalizedData = this._normalizeItem(data);
@@ -195,12 +204,14 @@ define([
         id: $option.val(),
         text: $option.html(),
         disabled: $option.prop('disabled'),
-        selected: $option.prop('selected')
+        selected: $option.prop('selected'),
+        title: $option.prop('title')
       };
     } else if ($option.is('optgroup')) {
       data = {
         text: $option.prop('label'),
-        children: []
+        children: [],
+        title: $option.prop('title')
       };
 
       var $children = $option.children('option');

src/js/select2/results.js

@@ -169,6 +169,10 @@ define([
       option.id = data._resultId;
     }
 
+    if (data.title) {
+      option.title = data.title;
+    }
+
     if (data.children) {
       attrs.role = 'group';
       attrs['aria-label'] = data.text;

src/js/select2/selection/multiple.js

@@ -85,6 +85,8 @@ define([
       var $selection = this.selectionContainer();
 
       $selection.append(formatted);
+      $selection.prop('title', selection.title);
+
       $selection.data('data', selection);
 
       $selections.push($selection);

src/js/select2/selection/single.js

@@ -84,8 +84,9 @@ define([
 
     var formatted = this.display(selection);
 
-    this.$selection.find('.select2-selection__rendered')
+    var $rendered = this.$selection.find('.select2-selection__rendered');
-      .empty().append(formatted);
+    $rendered.empty().append(formatted);
+    $rendered.prop('title', selection.title || selection.text);
   };
 
   return SingleSelection;