Fix default country code

Have received many forms with the phone number messed up due to the country code. When people click on the field most phones will display there phone numbers for quick entry. However when you do this it erases the country code which throws off the phone number. I would like a way to lock the country code so that it can’t be changed.

Hi there, @Alberto and welcome to the Community, :waving_hand:

Many thanks for sharing your suggestion! We’ll keep that in mind and see for more feedback ftom other users.

In the meantime, I’ve discussed your case with our devs, and here are the workarounds we can suggest:

  • When a phone number is added via autofill, our custom script will check if it starts with the default country code. If it doesn’t, the autofilled number won’t be inserted, and the valid country code will remain in the field.

  • We can also make the country code non-editable, so users won’t be able to remove it manually.

Please let me know if one of the suggested solutions work for you and I’ll pass your request to the dev team :slightly_smiling_face:

I think making the country code so that it can’t be edited would be best.

Got you, thanks!

I’ve forwarded your request to the devs and will update you once the solution is ready :slightly_smiling_face:

We’ve added this code to the Custom CSS field on the Appearance tab of your widget’s settings:

[class*="FlagDropdownTrigger__Container-sc"],
[class*="FlagDropdownTrigger__Container-sc"] * {
  pointer-events: none;
  cursor: default;
}
[class*="flag-dropdown-trigger"][class*="rotating-icon"],
[class*="flag-dropdown-trigger__rotating-icon"],
[class*="FlagDropdownTrigger__RotatingIcon"] {
  display: none !important;
}

And this script was placed in the Custom JS field on the Settings tab:

const CALLING_CODE = '1';
const PHONE_INPUT_SELECTOR = '.es-fields-phone input[type="tel"]';
const FLAG_TRIGGER_SELECTOR = '[class*="FlagDropdownTrigger__Container-sc"]';
const PHONE_ROOT_SELECTOR = '.es-fields-phone';
const digitsOnly = (value) => String(value ?? '').replace(/\D/g, '');
const lockedValue = (value) => {
  const digits = digitsOnly(value);
  if (!digits.startsWith(CALLING_CODE)) {
    return `+${CALLING_CODE}`;
  }
  return `+${digits}`;
};
const getFieldId = (input) => input?.id || null;
const applyLocked = (input, rawValue) => {
  const next = lockedValue(rawValue);
  if (digitsOnly(input.value) === digitsOnly(next) && String(input.value).startsWith('+')) {
    return false;
  }
  const fieldId = getFieldId(input);
  if (!fieldId) {
    input.value = next;
    input.dispatchEvent(new Event('input', { bubbles: true }));
    return true;
  }
  widget.setFieldValue(fieldId, next);
  return true;
};
const valueAfterPaste = (input, pastedText) => {
  const value = input.value ?? '';
  const start = input.selectionStart ?? value.length;
  const end = input.selectionEnd ?? value.length;
  return `${value.slice(0, start)}${pastedText}${value.slice(end)}`;
};
const valueAfterInsert = (input, insertedText) => {
  const value = input.value ?? '';
  const start = input.selectionStart ?? value.length;
  const end = input.selectionEnd ?? value.length;
  return `${value.slice(0, start)}${insertedText}${value.slice(end)}`;
};
const valueAfterDelete = (input, inputType) => {
  const value = input.value ?? '';
  const start = input.selectionStart ?? 0;
  const end = input.selectionEnd ?? 0;
  if (start !== end) {
    return `${value.slice(0, start)}${value.slice(end)}`;
  }
  if (inputType === 'deleteContentBackward') {
    if (start === 0) {
      return value;
    }
    return `${value.slice(0, start - 1)}${value.slice(start)}`;
  }
  if (inputType === 'deleteContentForward') {
    return `${value.slice(0, start)}${value.slice(start + 1)}`;
  }
  return value;
};
const isForeignFullNumberPaste = (input, pasted) => {
  const pastedDigits = digitsOnly(pasted);
  if (!pastedDigits) {
    return false;
  }
  if (pastedDigits.startsWith(CALLING_CODE)) {
    return false;
  }
  const value = input.value ?? '';
  const start = input.selectionStart ?? 0;
  const end = input.selectionEnd ?? 0;
  const replacesAll = start === 0 && end === value.length;
  const looksInternational = String(pasted).trim().startsWith('+') || pastedDigits.length >= 10;
  return replacesAll || looksInternational;
};
const blockCountryToggle = (event) => {
  const target = event.target;
  if (!(target instanceof Element)) {
    return;
  }
  if (!target.closest(FLAG_TRIGGER_SELECTOR)) {
    return;
  }
  event.preventDefault();
  event.stopPropagation();
};
util.addListener(PHONE_ROOT_SELECTOR, 'click', blockCountryToggle);
util.addListener(PHONE_ROOT_SELECTOR, 'pointerdown', blockCountryToggle);
util.addListener(PHONE_ROOT_SELECTOR, 'keydown', (event) => {
  const target = event.target;
  if (!(target instanceof Element)) {
    return;
  }
  if (!target.closest(FLAG_TRIGGER_SELECTOR)) {
    return;
  }
  if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
    event.preventDefault();
    event.stopPropagation();
  }
});
util.addListener(PHONE_INPUT_SELECTOR, 'beforeinput', (event) => {
  const input = event.target;
  if (!(input instanceof HTMLInputElement)) {
    return;
  }
  let nextValue = null;
  if (event.inputType === 'insertFromPaste' || event.inputType === 'insertFromDrop') {
    return;
  }
  if (event.inputType === 'insertText' && event.data != null) {
    nextValue = valueAfterInsert(input, event.data);
  } else if (event.inputType === 'deleteContentBackward' || event.inputType === 'deleteContentForward') {
    nextValue = valueAfterDelete(input, event.inputType);
  } else if (event.inputType?.startsWith('delete')) {
    nextValue = valueAfterDelete(input, 'deleteContentBackward');
  }
  if (nextValue == null) {
    return;
  }
  if (digitsOnly(nextValue).startsWith(CALLING_CODE)) {
    return;
  }
  event.preventDefault();
  applyLocked(input, `+${CALLING_CODE}`);
});
util.addListener(PHONE_INPUT_SELECTOR, 'paste', (event) => {
  const input = event.target;
  if (!(input instanceof HTMLInputElement)) {
    return;
  }
  const pasted = event.clipboardData?.getData('text') ?? '';
  if (!pasted) {
    return;
  }
  if (isForeignFullNumberPaste(input, pasted)) {
    event.preventDefault();
    applyLocked(input, `+${CALLING_CODE}`);
    return;
  }
  const nextValue = valueAfterPaste(input, pasted);
  if (digitsOnly(nextValue).startsWith(CALLING_CODE)) {
    return;
  }
  event.preventDefault();
  applyLocked(input, `+${CALLING_CODE}`);
});
util.addListener(PHONE_INPUT_SELECTOR, 'input', (event) => {
  const input = event.target;
  if (!(input instanceof HTMLInputElement)) {
    return;
  }
  if (digitsOnly(input.value).startsWith(CALLING_CODE) && String(input.value).startsWith('+')) {
    return;
  }
  applyLocked(input, input.value);
});

Please test the widget on your website and let me know how the codes work :wink:

It worked Perfectly! Thank you