Skip to content

Commit c232620

Browse files
kevin-brownkevin-brown
committed
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 select2#2530. This closes select2#2889.
1 parent 61a231d commit c232620

10 files changed

Lines changed: 119 additions & 29 deletions

File tree

‎dist/js/select2.amd.full.js‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -415,6 +415,10 @@ define('select2/results',[
415415
option.id = data._resultId;
416416
}
417417

418+
if (data.title) {
419+
option.title = data.title;
420+
}
421+
418422
if (data.children) {
419423
attrs.role = 'group';
420424
attrs['aria-label'] = data.text;
@@ -991,8 +995,9 @@ define('select2/selection/single',[
991995

992996
var formatted = this.display(selection);
993997

994-
this.$selection.find('.select2-selection__rendered')
995-
.empty().append(formatted);
998+
var $rendered = this.$selection.find('.select2-selection__rendered');
999+
$rendered.empty().append(formatted);
1000+
$rendered.prop('title', selection.title || selection.text);
9961001
};
9971002

9981003
return SingleSelection;
@@ -1085,6 +1090,8 @@ define('select2/selection/multiple',[
10851090
var $selection = this.selectionContainer();
10861091

10871092
$selection.append(formatted);
1093+
$selection.prop('title', selection.title);
1094+
10881095
$selection.data('data', selection);
10891096

10901097
$selections.push($selection);
@@ -2486,7 +2493,12 @@ define('select2/data/select',[
24862493
option.label = data.text;
24872494
} else {
24882495
option = document.createElement('option');
2489-
option.innerText = data.text;
2496+
2497+
if (option.textContent !== undefined) {
2498+
option.textContent = data.text;
2499+
} else {
2500+
option.innerText = data.text;
2501+
}
24902502
}
24912503

24922504
if (data.id) {
@@ -2501,6 +2513,10 @@ define('select2/data/select',[
25012513
option.selected = true;
25022514
}
25032515

2516+
if (data.title) {
2517+
option.title = data.title;
2518+
}
2519+
25042520
var $option = $(option);
25052521

25062522
var normalizedData = this._normalizeItem(data);
@@ -2526,12 +2542,14 @@ define('select2/data/select',[
25262542
id: $option.val(),
25272543
text: $option.html(),
25282544
disabled: $option.prop('disabled'),
2529-
selected: $option.prop('selected')
2545+
selected: $option.prop('selected'),
2546+
title: $option.prop('title')
25302547
};
25312548
} else if ($option.is('optgroup')) {
25322549
data = {
25332550
text: $option.prop('label'),
2534-
children: []
2551+
children: [],
2552+
title: $option.prop('title')
25352553
};
25362554

25372555
var $children = $option.children('option');

‎dist/js/select2.amd.js‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -415,6 +415,10 @@ define('select2/results',[
415415
option.id = data._resultId;
416416
}
417417

418+
if (data.title) {
419+
option.title = data.title;
420+
}
421+
418422
if (data.children) {
419423
attrs.role = 'group';
420424
attrs['aria-label'] = data.text;
@@ -991,8 +995,9 @@ define('select2/selection/single',[
991995

992996
var formatted = this.display(selection);
993997

994-
this.$selection.find('.select2-selection__rendered')
995-
.empty().append(formatted);
998+
var $rendered = this.$selection.find('.select2-selection__rendered');
999+
$rendered.empty().append(formatted);
1000+
$rendered.prop('title', selection.title || selection.text);
9961001
};
9971002

9981003
return SingleSelection;
@@ -1085,6 +1090,8 @@ define('select2/selection/multiple',[
10851090
var $selection = this.selectionContainer();
10861091

10871092
$selection.append(formatted);
1093+
$selection.prop('title', selection.title);
1094+
10881095
$selection.data('data', selection);
10891096

10901097
$selections.push($selection);
@@ -2486,7 +2493,12 @@ define('select2/data/select',[
24862493
option.label = data.text;
24872494
} else {
24882495
option = document.createElement('option');
2489-
option.innerText = data.text;
2496+
2497+
if (option.textContent !== undefined) {
2498+
option.textContent = data.text;
2499+
} else {
2500+
option.innerText = data.text;
2501+
}
24902502
}
24912503

24922504
if (data.id) {
@@ -2501,6 +2513,10 @@ define('select2/data/select',[
25012513
option.selected = true;
25022514
}
25032515

2516+
if (data.title) {
2517+
option.title = data.title;
2518+
}
2519+
25042520
var $option = $(option);
25052521

25062522
var normalizedData = this._normalizeItem(data);
@@ -2526,12 +2542,14 @@ define('select2/data/select',[
25262542
id: $option.val(),
25272543
text: $option.html(),
25282544
disabled: $option.prop('disabled'),
2529-
selected: $option.prop('selected')
2545+
selected: $option.prop('selected'),
2546+
title: $option.prop('title')
25302547
};
25312548
} else if ($option.is('optgroup')) {
25322549
data = {
25332550
text: $option.prop('label'),
2534-
children: []
2551+
children: [],
2552+
title: $option.prop('title')
25352553
};
25362554

25372555
var $children = $option.children('option');

‎dist/js/select2.full.js‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -853,6 +853,10 @@ define('select2/results',[
853853
option.id = data._resultId;
854854
}
855855

856+
if (data.title) {
857+
option.title = data.title;
858+
}
859+
856860
if (data.children) {
857861
attrs.role = 'group';
858862
attrs['aria-label'] = data.text;
@@ -1429,8 +1433,9 @@ define('select2/selection/single',[
14291433

14301434
var formatted = this.display(selection);
14311435

1432-
this.$selection.find('.select2-selection__rendered')
1433-
.empty().append(formatted);
1436+
var $rendered = this.$selection.find('.select2-selection__rendered');
1437+
$rendered.empty().append(formatted);
1438+
$rendered.prop('title', selection.title || selection.text);
14341439
};
14351440

14361441
return SingleSelection;
@@ -1523,6 +1528,8 @@ define('select2/selection/multiple',[
15231528
var $selection = this.selectionContainer();
15241529

15251530
$selection.append(formatted);
1531+
$selection.prop('title', selection.title);
1532+
15261533
$selection.data('data', selection);
15271534

15281535
$selections.push($selection);
@@ -2924,7 +2931,12 @@ define('select2/data/select',[
29242931
option.label = data.text;
29252932
} else {
29262933
option = document.createElement('option');
2927-
option.innerText = data.text;
2934+
2935+
if (option.textContent !== undefined) {
2936+
option.textContent = data.text;
2937+
} else {
2938+
option.innerText = data.text;
2939+
}
29282940
}
29292941

29302942
if (data.id) {
@@ -2939,6 +2951,10 @@ define('select2/data/select',[
29392951
option.selected = true;
29402952
}
29412953

2954+
if (data.title) {
2955+
option.title = data.title;
2956+
}
2957+
29422958
var $option = $(option);
29432959

29442960
var normalizedData = this._normalizeItem(data);
@@ -2964,12 +2980,14 @@ define('select2/data/select',[
29642980
id: $option.val(),
29652981
text: $option.html(),
29662982
disabled: $option.prop('disabled'),
2967-
selected: $option.prop('selected')
2983+
selected: $option.prop('selected'),
2984+
title: $option.prop('title')
29682985
};
29692986
} else if ($option.is('optgroup')) {
29702987
data = {
29712988
text: $option.prop('label'),
2972-
children: []
2989+
children: [],
2990+
title: $option.prop('title')
29732991
};
29742992

29752993
var $children = $option.children('option');

‎dist/js/select2.full.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/select2.js‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -853,6 +853,10 @@ define('select2/results',[
853853
option.id = data._resultId;
854854
}
855855

856+
if (data.title) {
857+
option.title = data.title;
858+
}
859+
856860
if (data.children) {
857861
attrs.role = 'group';
858862
attrs['aria-label'] = data.text;
@@ -1429,8 +1433,9 @@ define('select2/selection/single',[
14291433

14301434
var formatted = this.display(selection);
14311435

1432-
this.$selection.find('.select2-selection__rendered')
1433-
.empty().append(formatted);
1436+
var $rendered = this.$selection.find('.select2-selection__rendered');
1437+
$rendered.empty().append(formatted);
1438+
$rendered.prop('title', selection.title || selection.text);
14341439
};
14351440

14361441
return SingleSelection;
@@ -1523,6 +1528,8 @@ define('select2/selection/multiple',[
15231528
var $selection = this.selectionContainer();
15241529

15251530
$selection.append(formatted);
1531+
$selection.prop('title', selection.title);
1532+
15261533
$selection.data('data', selection);
15271534

15281535
$selections.push($selection);
@@ -2924,7 +2931,12 @@ define('select2/data/select',[
29242931
option.label = data.text;
29252932
} else {
29262933
option = document.createElement('option');
2927-
option.innerText = data.text;
2934+
2935+
if (option.textContent !== undefined) {
2936+
option.textContent = data.text;
2937+
} else {
2938+
option.innerText = data.text;
2939+
}
29282940
}
29292941

29302942
if (data.id) {
@@ -2939,6 +2951,10 @@ define('select2/data/select',[
29392951
option.selected = true;
29402952
}
29412953

2954+
if (data.title) {
2955+
option.title = data.title;
2956+
}
2957+
29422958
var $option = $(option);
29432959

29442960
var normalizedData = this._normalizeItem(data);
@@ -2964,12 +2980,14 @@ define('select2/data/select',[
29642980
id: $option.val(),
29652981
text: $option.html(),
29662982
disabled: $option.prop('disabled'),
2967-
selected: $option.prop('selected')
2983+
selected: $option.prop('selected'),
2984+
title: $option.prop('title')
29682985
};
29692986
} else if ($option.is('optgroup')) {
29702987
data = {
29712988
text: $option.prop('label'),
2972-
children: []
2989+
children: [],
2990+
title: $option.prop('title')
29732991
};
29742992

29752993
var $children = $option.children('option');

‎dist/js/select2.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/select2/data/select.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,12 @@ define([
155155
option.label = data.text;
156156
} else {
157157
option = document.createElement('option');
158-
option.innerText = data.text;
158+
159+
if (option.textContent !== undefined) {
160+
option.textContent = data.text;
161+
} else {
162+
option.innerText = data.text;
163+
}
159164
}
160165

161166
if (data.id) {
@@ -170,6 +175,10 @@ define([
170175
option.selected = true;
171176
}
172177

178+
if (data.title) {
179+
option.title = data.title;
180+
}
181+
173182
var $option = $(option);
174183

175184
var normalizedData = this._normalizeItem(data);
@@ -195,12 +204,14 @@ define([
195204
id: $option.val(),
196205
text: $option.html(),
197206
disabled: $option.prop('disabled'),
198-
selected: $option.prop('selected')
207+
selected: $option.prop('selected'),
208+
title: $option.prop('title')
199209
};
200210
} else if ($option.is('optgroup')) {
201211
data = {
202212
text: $option.prop('label'),
203-
children: []
213+
children: [],
214+
title: $option.prop('title')
204215
};
205216

206217
var $children = $option.children('option');

‎src/js/select2/results.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,10 @@ define([
169169
option.id = data._resultId;
170170
}
171171

172+
if (data.title) {
173+
option.title = data.title;
174+
}
175+
172176
if (data.children) {
173177
attrs.role = 'group';
174178
attrs['aria-label'] = data.text;

‎src/js/select2/selection/multiple.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,8 @@ define([
8585
var $selection = this.selectionContainer();
8686

8787
$selection.append(formatted);
88+
$selection.prop('title', selection.title);
89+
8890
$selection.data('data', selection);
8991

9092
$selections.push($selection);

‎src/js/select2/selection/single.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,9 @@ define([
8484

8585
var formatted = this.display(selection);
8686

87-
this.$selection.find('.select2-selection__rendered')
88-
.empty().append(formatted);
87+
var $rendered = this.$selection.find('.select2-selection__rendered');
88+
$rendered.empty().append(formatted);
89+
$rendered.prop('title', selection.title || selection.text);
8990
};
9091

9192
return SingleSelection;

0 commit comments

Comments
 (0)