diff --git a/app/javascript/packs/ssn-field.ts b/app/javascript/packs/ssn-field.ts index 322cf9520bd..63f69cd7216 100644 --- a/app/javascript/packs/ssn-field.ts +++ b/app/javascript/packs/ssn-field.ts @@ -1,49 +1,42 @@ import Cleave from 'cleave.js'; -function formatSSNFieldAndLimitLength() { - const inputs = document.querySelectorAll('input.ssn-toggle[type="password"]'); - - if (inputs) { - inputs.forEach((input) => { - const toggle = document.querySelector(`[aria-controls="${input.id}"]`)!; - - let cleave: Cleave | undefined; - - function sync() { - const { value } = input; - cleave?.destroy(); - if (toggle.checked) { - cleave = new Cleave(input, { - numericOnly: true, - blocks: [3, 2, 4], - delimiter: '-', - }); - } else { - const nextValue = value.replace(/-/g, ''); - if (nextValue !== value) { - input.value = nextValue; - } - } - const didFormat = input.value !== value; - if (didFormat) { - input.checkValidity(); - } +const inputs = document.querySelectorAll('input.ssn-toggle[type="password"]'); +inputs.forEach((input) => { + const toggle = document.querySelector(`[aria-controls="${input.id}"]`)!; + + let cleave: Cleave | undefined; + + function sync() { + const { value } = input; + cleave?.destroy(); + if (toggle.checked) { + cleave = new Cleave(input, { + numericOnly: true, + blocks: [3, 2, 4], + delimiter: '-', + }); + } else { + const nextValue = value.replace(/-/g, ''); + if (nextValue !== value) { + input.value = nextValue; } + } + const didFormat = input.value !== value; + if (didFormat) { + input.checkValidity(); + } + } - sync(); - toggle.addEventListener('change', sync); - - function limitLength(this: HTMLInputElement) { - const maxLength = 9 + (this.value.match(/-/g) || []).length; - if (this.value.length > maxLength) { - this.value = this.value.slice(0, maxLength); - this.checkValidity(); - } - } + sync(); + toggle.addEventListener('change', sync); - input.addEventListener('input', limitLength.bind(input)); - }); + function limitLength(this: HTMLInputElement) { + const maxLength = 9 + (this.value.match(/-/g) || []).length; + if (this.value.length > maxLength) { + this.value = this.value.slice(0, maxLength); + this.checkValidity(); + } } -} -document.addEventListener('DOMContentLoaded', formatSSNFieldAndLimitLength); + input.addEventListener('input', limitLength.bind(input)); +}); diff --git a/app/javascript/packs/state-guidance.ts b/app/javascript/packs/state-guidance.ts index a317fd668da..bc9bfa10710 100644 --- a/app/javascript/packs/state-guidance.ts +++ b/app/javascript/packs/state-guidance.ts @@ -57,8 +57,6 @@ function onIdentityDocJurisdictionSelection() { document.getElementById('idv_form_state')?.addEventListener('change', onStateSelectionChange); -document.addEventListener('DOMContentLoaded', () => { - onStateSelectionChange(); - onIdentityDocStateSelection(); - onIdentityDocJurisdictionSelection(); -}); +onStateSelectionChange(); +onIdentityDocStateSelection(); +onIdentityDocJurisdictionSelection();