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.
This commit is contained in:
parent
61a231d868
commit
c2326209c2
26
dist/js/select2.amd.full.js
vendored
26
dist/js/select2.amd.full.js
vendored
@ -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')
|
||||
.empty().append(formatted);
|
||||
var $rendered = this.$selection.find('.select2-selection__rendered');
|
||||
$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,8 +2493,13 @@ define('select2/data/select',[
|
||||
option.label = data.text;
|
||||
} else {
|
||||
option = document.createElement('option');
|
||||
|
||||
if (option.textContent !== undefined) {
|
||||
option.textContent = data.text;
|
||||
} else {
|
||||
option.innerText = data.text;
|
||||
}
|
||||
}
|
||||
|
||||
if (data.id) {
|
||||
option.value = 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');
|
||||
|
26
dist/js/select2.amd.js
vendored
26
dist/js/select2.amd.js
vendored
@ -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')
|
||||
.empty().append(formatted);
|
||||
var $rendered = this.$selection.find('.select2-selection__rendered');
|
||||
$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,8 +2493,13 @@ define('select2/data/select',[
|
||||
option.label = data.text;
|
||||
} else {
|
||||
option = document.createElement('option');
|
||||
|
||||
if (option.textContent !== undefined) {
|
||||
option.textContent = data.text;
|
||||
} else {
|
||||
option.innerText = data.text;
|
||||
}
|
||||
}
|
||||
|
||||
if (data.id) {
|
||||
option.value = 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');
|
||||
|
26
dist/js/select2.full.js
vendored
26
dist/js/select2.full.js
vendored
@ -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')
|
||||
.empty().append(formatted);
|
||||
var $rendered = this.$selection.find('.select2-selection__rendered');
|
||||
$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,8 +2931,13 @@ define('select2/data/select',[
|
||||
option.label = data.text;
|
||||
} else {
|
||||
option = document.createElement('option');
|
||||
|
||||
if (option.textContent !== undefined) {
|
||||
option.textContent = data.text;
|
||||
} else {
|
||||
option.innerText = data.text;
|
||||
}
|
||||
}
|
||||
|
||||
if (data.id) {
|
||||
option.value = 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');
|
||||
|
4
dist/js/select2.full.min.js
vendored
4
dist/js/select2.full.min.js
vendored
File diff suppressed because one or more lines are too long
26
dist/js/select2.js
vendored
26
dist/js/select2.js
vendored
@ -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')
|
||||
.empty().append(formatted);
|
||||
var $rendered = this.$selection.find('.select2-selection__rendered');
|
||||
$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,8 +2931,13 @@ define('select2/data/select',[
|
||||
option.label = data.text;
|
||||
} else {
|
||||
option = document.createElement('option');
|
||||
|
||||
if (option.textContent !== undefined) {
|
||||
option.textContent = data.text;
|
||||
} else {
|
||||
option.innerText = data.text;
|
||||
}
|
||||
}
|
||||
|
||||
if (data.id) {
|
||||
option.value = 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');
|
||||
|
4
dist/js/select2.min.js
vendored
4
dist/js/select2.min.js
vendored
File diff suppressed because one or more lines are too long
15
src/js/select2/data/select.js
vendored
15
src/js/select2/data/select.js
vendored
@ -155,8 +155,13 @@ define([
|
||||
option.label = data.text;
|
||||
} else {
|
||||
option = document.createElement('option');
|
||||
|
||||
if (option.textContent !== undefined) {
|
||||
option.textContent = data.text;
|
||||
} else {
|
||||
option.innerText = data.text;
|
||||
}
|
||||
}
|
||||
|
||||
if (data.id) {
|
||||
option.value = 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');
|
||||
|
4
src/js/select2/results.js
vendored
4
src/js/select2/results.js
vendored
@ -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;
|
||||
|
2
src/js/select2/selection/multiple.js
vendored
2
src/js/select2/selection/multiple.js
vendored
@ -85,6 +85,8 @@ define([
|
||||
var $selection = this.selectionContainer();
|
||||
|
||||
$selection.append(formatted);
|
||||
$selection.prop('title', selection.title);
|
||||
|
||||
$selection.data('data', selection);
|
||||
|
||||
$selections.push($selection);
|
||||
|
5
src/js/select2/selection/single.js
vendored
5
src/js/select2/selection/single.js
vendored
@ -84,8 +84,9 @@ define([
|
||||
|
||||
var formatted = this.display(selection);
|
||||
|
||||
this.$selection.find('.select2-selection__rendered')
|
||||
.empty().append(formatted);
|
||||
var $rendered = this.$selection.find('.select2-selection__rendered');
|
||||
$rendered.empty().append(formatted);
|
||||
$rendered.prop('title', selection.title || selection.text);
|
||||
};
|
||||
|
||||
return SingleSelection;
|
||||
|
Loading…
Reference in New Issue
Block a user