Skip to content

Commit

Permalink
Fix dupe IDs when using multiple instances at once
Browse files Browse the repository at this point in the history
  • Loading branch information
@jackocnr
jackocnr committed Apr 18, 2020
1 parent 097002e commit 66bc94a
Show file tree
Hide file tree
Showing 5 changed files with 22 additions and 19 deletions.
11 changes: 6 additions & 5 deletions build/js/intlTelInput-jquery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,7 @@
this.selectedFlag = this._createEl("div", {
"class": "iti__selected-flag",
role: "combobox",
"aria-owns": "country-listbox",
"aria-owns": "iti-".concat(this.id, "__country-listbox"),
"aria-expanded": "false"
}, this.flagsContainer);
this.selectedFlagInner = this._createEl("div", {
Expand All @@ -382,7 +382,7 @@
// country dropdown: preferred countries, then divider, then all countries
this.countryList = this._createEl("ul", {
"class": "iti__country-list iti__hide",
id: "country-listbox",
id: "iti-".concat(this.id, "__country-listbox"),
role: "listbox"
});
if (this.preferredCountries.length) {
Expand Down Expand Up @@ -431,7 +431,7 @@
var c = countries[i];
var idSuffix = preferred ? "-preferred" : "";
// open the list item
tmp += "<li class='iti__country ".concat(className, "' tabIndex='-1' id='iti-item-").concat(c.iso2).concat(idSuffix, "' role='option' data-dial-code='").concat(c.dialCode, "' data-country-code='").concat(c.iso2, "'>");
tmp += "<li class='iti__country ".concat(className, "' tabIndex='-1' id='iti-").concat(this.id, "__item-").concat(c.iso2).concat(idSuffix, "' role='option' data-dial-code='").concat(c.dialCode, "' data-country-code='").concat(c.iso2, "'>");
// add the flag
tmp += "<div class='iti__flag-box'><div class='iti__flag iti__".concat(c.iso2, "'></div></div>");
// and the country name and dial code
Expand Down Expand Up @@ -791,7 +791,7 @@
value: function _searchForCountry(query) {
for (var i = 0; i < this.countries.length; i++) {
if (this._startsWith(this.countries[i].name, query)) {
var listItem = this.countryList.querySelector("#iti-item-".concat(this.countries[i].iso2));
var listItem = this.countryList.querySelector("#iti-".concat(this.id, "__item-").concat(this.countries[i].iso2));
// update highlighting and scroll
this._highlightListItem(listItem, false);
this._scrollTo(listItem, true);
Expand Down Expand Up @@ -941,7 +941,8 @@
prevItem.setAttribute("aria-selected", "false");
}
if (countryCode) {
var nextItem = this.countryList.querySelector("#iti-item-".concat(countryCode, "-preferred")) || this.countryList.querySelector("#iti-item-".concat(countryCode));
// check if there is a preferred item first, else fall back to standard
var nextItem = this.countryList.querySelector("#iti-".concat(this.id, "__item-").concat(countryCode, "-preferred")) || this.countryList.querySelector("#iti-".concat(this.id, "__item-").concat(countryCode));
nextItem.setAttribute("aria-selected", "true");
nextItem.classList.add("iti__active");
this.activeItem = nextItem;
Expand Down
4 changes: 2 additions & 2 deletions build/js/intlTelInput-jquery.min.js
View file

Large diffs are not rendered by default.

11 changes: 6 additions & 5 deletions build/js/intlTelInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -357,7 +357,7 @@
this.selectedFlag = this._createEl("div", {
"class": "iti__selected-flag",
role: "combobox",
"aria-owns": "country-listbox",
"aria-owns": "iti-".concat(this.id, "__country-listbox"),
"aria-expanded": "false"
}, this.flagsContainer);
this.selectedFlagInner = this._createEl("div", {
Expand All @@ -377,7 +377,7 @@
// country dropdown: preferred countries, then divider, then all countries
this.countryList = this._createEl("ul", {
"class": "iti__country-list iti__hide",
id: "country-listbox",
id: "iti-".concat(this.id, "__country-listbox"),
role: "listbox"
});
if (this.preferredCountries.length) {
Expand Down Expand Up @@ -426,7 +426,7 @@
var c = countries[i];
var idSuffix = preferred ? "-preferred" : "";
// open the list item
tmp += "<li class='iti__country ".concat(className, "' tabIndex='-1' id='iti-item-").concat(c.iso2).concat(idSuffix, "' role='option' data-dial-code='").concat(c.dialCode, "' data-country-code='").concat(c.iso2, "'>");
tmp += "<li class='iti__country ".concat(className, "' tabIndex='-1' id='iti-").concat(this.id, "__item-").concat(c.iso2).concat(idSuffix, "' role='option' data-dial-code='").concat(c.dialCode, "' data-country-code='").concat(c.iso2, "'>");
// add the flag
tmp += "<div class='iti__flag-box'><div class='iti__flag iti__".concat(c.iso2, "'></div></div>");
// and the country name and dial code
Expand Down Expand Up @@ -786,7 +786,7 @@
value: function _searchForCountry(query) {
for (var i = 0; i < this.countries.length; i++) {
if (this._startsWith(this.countries[i].name, query)) {
var listItem = this.countryList.querySelector("#iti-item-".concat(this.countries[i].iso2));
var listItem = this.countryList.querySelector("#iti-".concat(this.id, "__item-").concat(this.countries[i].iso2));
// update highlighting and scroll
this._highlightListItem(listItem, false);
this._scrollTo(listItem, true);
Expand Down Expand Up @@ -936,7 +936,8 @@
prevItem.setAttribute("aria-selected", "false");
}
if (countryCode) {
var nextItem = this.countryList.querySelector("#iti-item-".concat(countryCode, "-preferred")) || this.countryList.querySelector("#iti-item-".concat(countryCode));
// check if there is a preferred item first, else fall back to standard
var nextItem = this.countryList.querySelector("#iti-".concat(this.id, "__item-").concat(countryCode, "-preferred")) || this.countryList.querySelector("#iti-".concat(this.id, "__item-").concat(countryCode));
nextItem.setAttribute("aria-selected", "true");
nextItem.classList.add("iti__active");
this.activeItem = nextItem;
Expand Down
4 changes: 2 additions & 2 deletions build/js/intlTelInput.min.js
View file

Large diffs are not rendered by default.

11 changes: 6 additions & 5 deletions src/js/intlTelInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,7 @@ class Iti {
this.selectedFlag = this._createEl('div', {
class: 'iti__selected-flag',
role: 'combobox',
'aria-owns': 'country-listbox',
'aria-owns': `iti-${this.id}__country-listbox`,
'aria-expanded': 'false',
}, this.flagsContainer);
this.selectedFlagInner = this._createEl('div', { class: 'iti__flag' }, this.selectedFlag);
Expand All @@ -352,7 +352,7 @@ class Iti {
// country dropdown: preferred countries, then divider, then all countries
this.countryList = this._createEl('ul', {
class: 'iti__country-list iti__hide',
id: 'country-listbox',
id: `iti-${this.id}__country-listbox`,
role: 'listbox',
});
if (this.preferredCountries.length) {
Expand Down Expand Up @@ -402,7 +402,7 @@ class Iti {
const c = countries[i];
const idSuffix = preferred ? '-preferred' : '';
// open the list item
tmp += `<li class='iti__country ${className}' tabIndex='-1' id='iti-item-${c.iso2}${idSuffix}' role='option' data-dial-code='${c.dialCode}' data-country-code='${c.iso2}'>`;
tmp += `<li class='iti__country ${className}' tabIndex='-1' id='iti-${this.id}__item-${c.iso2}${idSuffix}' role='option' data-dial-code='${c.dialCode}' data-country-code='${c.iso2}'>`;
// add the flag
tmp += `<div class='iti__flag-box'><div class='iti__flag iti__${c.iso2}'></div></div>`;
// and the country name and dial code
Expand Down Expand Up @@ -814,7 +814,7 @@ class Iti {
_searchForCountry(query) {
for (let i = 0; i < this.countries.length; i++) {
if (this._startsWith(this.countries[i].name, query)) {
const listItem = this.countryList.querySelector(`#iti-item-${this.countries[i].iso2}`);
const listItem = this.countryList.querySelector(`#iti-${this.id}__item-${this.countries[i].iso2}`);
// update highlighting and scroll
this._highlightListItem(listItem, false);
this._scrollTo(listItem, true);
Expand Down Expand Up @@ -990,7 +990,8 @@ class Iti {
prevItem.setAttribute('aria-selected', 'false');
}
if (countryCode) {
const nextItem = this.countryList.querySelector(`#iti-item-${countryCode}-preferred`) || this.countryList.querySelector(`#iti-item-${countryCode}`);
// check if there is a preferred item first, else fall back to standard
const nextItem = this.countryList.querySelector(`#iti-${this.id}__item-${countryCode}-preferred`) || this.countryList.querySelector(`#iti-${this.id}__item-${countryCode}`);
nextItem.setAttribute('aria-selected', 'true');
nextItem.classList.add('iti__active');
this.activeItem = nextItem;
Expand Down

0 comments on commit 66bc94a

Please sign in to comment.