diff --git a/app/components/phone_input_component.scss b/app/components/phone_input_component.scss
index 330bf4378da..5f653cf6ea9 100644
--- a/app/components/phone_input_component.scss
+++ b/app/components/phone_input_component.scss
@@ -18,16 +18,6 @@ lg-phone-input {
.iti__dial-code {
color: color('ink');
}
-
- .iti:not(.iti--allow-dropdown) input {
- padding-left: 36px;
- padding-right: 6px;
- }
-
- .iti:not(.iti--allow-dropdown) .iti__flag-container {
- left: 0;
- right: auto;
- }
}
.phone-input__international-code-wrapper {
diff --git a/app/javascript/packages/phone-input/index.spec.ts b/app/javascript/packages/phone-input/index.spec.ts
index 711c9629a16..17fb61d9340 100644
--- a/app/javascript/packages/phone-input/index.spec.ts
+++ b/app/javascript/packages/phone-input/index.spec.ts
@@ -4,23 +4,6 @@ import { computeAccessibleName } from 'dom-accessibility-api';
import * as analytics from '@18f/identity-analytics';
import { useSandbox } from '@18f/identity-test-helpers';
-const MULTIPLE_OPTIONS_HTML = `
- `;
-
-const SINGLE_OPTION_HTML = `
- `;
-
-const SINGLE_OPTION_SELECT_NON_US_HTML = `
- `;
-
describe('PhoneInput', () => {
const sandbox = useSandbox();
@@ -35,13 +18,10 @@ describe('PhoneInput', () => {
});
function createAndConnectElement({
- isUSSingleOption = false,
- isInternationalSingleOption = false,
deliveryMethods = ['sms', 'voice'],
translatedCountryCodeNames = {},
phoneInputValue = undefined,
}: {
- isUSSingleOption?: boolean;
isInternationalSingleOption?: Boolean;
deliveryMethods?: string[];
translatedCountryCodeNames?: Record;
@@ -74,9 +54,11 @@ describe('PhoneInput', () => {
- ${isUSSingleOption ? SINGLE_OPTION_HTML : ''}
- ${isInternationalSingleOption ? SINGLE_OPTION_SELECT_NON_US_HTML : ''}
- ${!isUSSingleOption && !isInternationalSingleOption ? MULTIPLE_OPTIONS_HTML : ''}
+
@@ -94,12 +76,6 @@ describe('PhoneInput', () => {
return element;
}
- it('initializes with dropdown', () => {
- const input = createAndConnectElement();
-
- expect(input.querySelector('.iti.iti--allow-dropdown')).to.be.ok();
- });
-
context('with US phone number', () => {
it('validates input', async () => {
const input = createAndConnectElement();
@@ -240,25 +216,6 @@ describe('PhoneInput', () => {
expect(controlled).to.equal(listbox);
});
- context('with single option', () => {
- it('initializes without dropdown', () => {
- const input = createAndConnectElement({ isUSSingleOption: true });
-
- expect(input.querySelector('.iti:not(.iti--allow-dropdown)')).to.be.ok();
- });
-
- it('validates phone from region', async () => {
- const input = createAndConnectElement({ isInternationalSingleOption: true });
-
- const phoneNumber = getByLabelText(input, 'Phone number') as HTMLInputElement;
-
- await userEvent.type(phoneNumber, '5135551234');
- expect(phoneNumber.validationMessage).to.equal(
- 'Enter a phone number with the correct number of digits.',
- );
- });
- });
-
context('with constrained delivery options', () => {
it('validates supported delivery method', async () => {
const input = createAndConnectElement({ deliveryMethods: ['voice'] });
diff --git a/app/javascript/packages/phone-input/index.ts b/app/javascript/packages/phone-input/index.ts
index f1e084d4fdb..c193e793bdb 100644
--- a/app/javascript/packages/phone-input/index.ts
+++ b/app/javascript/packages/phone-input/index.ts
@@ -106,10 +106,6 @@ export class PhoneInputElement extends HTMLElement {
return this.iti.selectedFlag.querySelector('.usa-sr-only')!;
}
- get hasDropdown(): boolean {
- return Boolean(this.supportedCountryCodes && this.supportedCountryCodes.length > 1);
- }
-
/**
* Logs an event when the country code has been changed.
*/
@@ -127,12 +123,10 @@ export class PhoneInputElement extends HTMLElement {
const countryCode = this.getSelectedCountryCode();
if (countryCode) {
this.codeInput.value = countryCode;
- if (this.hasDropdown) {
- // Move value text from title attribute to the flag's hidden text element.
- // See: https://github.com/jackocnr/intl-tel-input/blob/d54b127/src/js/intlTelInput.js#L1191-L1197
- this.valueText.textContent = this.iti.selectedFlag.title;
- this.iti.selectedFlag.removeAttribute('title');
- }
+ // Move value text from title attribute to the flag's hidden text element.
+ // See: https://github.com/jackocnr/intl-tel-input/blob/d54b127/src/js/intlTelInput.js#L1191-L1197
+ this.valueText.textContent = this.iti.selectedFlag.title;
+ this.iti.selectedFlag.removeAttribute('title');
if (fireChangeEvent) {
this.codeInput.dispatchEvent(new CustomEvent('change', { bubbles: true }));
}
@@ -148,32 +142,29 @@ export class PhoneInputElement extends HTMLElement {
localizedCountries: countryCodePairs,
onlyCountries: supportedCountryCodes,
autoPlaceholder: 'off',
- allowDropdown: this.hasDropdown,
}) as IntlTelInput;
this.iti = iti;
- if (this.hasDropdown) {
- // Remove duplicate items in the country list
- const preferred: NodeListOf =
- iti.countryList.querySelectorAll('.iti__preferred');
- preferred.forEach((listItem) => {
- const { countryCode } = listItem.dataset;
- const duplicates: NodeListOf = iti.countryList.querySelectorAll(
- `.iti__standard[data-country-code="${countryCode}"]`,
- );
- duplicates.forEach((duplicateListItem) => {
- duplicateListItem.parentNode?.removeChild(duplicateListItem);
- });
+ // Remove duplicate items in the country list
+ const preferred: NodeListOf =
+ iti.countryList.querySelectorAll('.iti__preferred');
+ preferred.forEach((listItem) => {
+ const { countryCode } = listItem.dataset;
+ const duplicates: NodeListOf = iti.countryList.querySelectorAll(
+ `.iti__standard[data-country-code="${countryCode}"]`,
+ );
+ duplicates.forEach((duplicateListItem) => {
+ duplicateListItem.parentNode?.removeChild(duplicateListItem);
});
-
- // Improve base accessibility of intl-tel-input
- const valueText = document.createElement('div');
- valueText.classList.add('usa-sr-only');
- iti.selectedFlag.appendChild(valueText);
- iti.selectedFlag.setAttribute('aria-label', this.strings.country_code_label);
- iti.selectedFlag.removeAttribute('aria-owns');
- }
+ });
+
+ // Improve base accessibility of intl-tel-input
+ const valueText = document.createElement('div');
+ valueText.classList.add('usa-sr-only');
+ iti.selectedFlag.appendChild(valueText);
+ iti.selectedFlag.setAttribute('aria-label', this.strings.country_code_label);
+ iti.selectedFlag.removeAttribute('aria-owns');
this.syncCountryToCodeInput({ fireChangeEvent: false });
diff --git a/spec/components/previews/phone_input_component_preview.rb b/spec/components/previews/phone_input_component_preview.rb
index e93c0c47c27..4ff7c694df7 100644
--- a/spec/components/previews/phone_input_component_preview.rb
+++ b/spec/components/previews/phone_input_component_preview.rb
@@ -8,10 +8,6 @@ def default
def limited_country_selection
render(PhoneInputComponent.new(form: form_builder, allowed_countries: ['US', 'CA', 'FR']))
end
-
- def single_country_selection
- render(PhoneInputComponent.new(form: form_builder, allowed_countries: ['US']))
- end
# @!endgroup
# @display form true