1
0
mirror of synced 2024-11-25 22:36:03 +03:00

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:
Kevin Brown 2015-02-09 20:52:02 -05:00
parent 61a231d868
commit c2326209c2
10 changed files with 119 additions and 29 deletions

View File

@ -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');

View File

@ -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');

View File

@ -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');

File diff suppressed because one or more lines are too long

26
dist/js/select2.js vendored
View File

@ -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');

File diff suppressed because one or more lines are too long

View File

@ -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');

View File

@ -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;

View File

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

View File

@ -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;