Problem/Motivation
When selecting another country for the telephone number in a form, using the field, the console log shows the error:
Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')
at E.fn.init.val (jquery.min.js?v=3.6.3:2:69921)
at HTMLSelectElement.<anonymous> (phone-number-form-element.js?v=9.5.10:51:33)
at HTMLSelectElement.dispatch (jquery.min.js?v=3.6.3:2:43336)
at y.handle (jquery.min.js?v=3.6.3:2:41320)
and the selected country remains the default country according to the display, while actually another country is active.
Steps to reproduce
In my case the field was used in the setup form of a custom TFA plugin:
public function getSetupForm(array $form, FormStateInterface $form_state) {
$form['information'] = [
'#type' => 'html_tag',
'#tag' => 'section',
'#attributes' => [
'class' => ['col-md-6'],
],
];
$form['information']['card'] = [
'#type' => 'html_tag',
'#tag' => 'div',
'#attributes' => [
'class' => ['card'],
],
];
$form['information']['card']['card-body'] = [
'#type' => 'html_tag',
'#tag' => 'div',
'#attributes' => [
'class' => ['card-body'],
],
];
$form['information']['card']['card-body']['title'] = [
'#type' => 'html_tag',
'#tag' => 'h2',
'#value' => $this->t('Set your phone for security via SMS'),
];
$form['information']['card']['card-body']['intro'] = [
'#type' => 'html_tag',
'#tag' => 'p',
'#value' => $this->t('Do you have your mobile phone at hand? If so, continue by entering your phone number. Click Send SMS and enter the security code you receive by SMS. Then click on Verify.'),
];
$form['information']['card']['card-body']['q1'] = [
'#type' => 'details',
'#title' => $this->t('Which phone can I use?'),
'#value' => $this->t('Use your personal mobile phone that can receive SMS. If you use a landline, there is no guarantee that your SMS will be received. This varies from operator to operator.'),
];
$form['information']['card']['card-body']['q2'] = [
'#type' => 'details',
'#title' => $this->t('Can I register a foreign phone number?'),
'#value' => $this->t('You certainly can. Select the appropriate country code and enter your phone number behind it (without the 0).'),
];
$lang_code = \Drupal::languageManager()->getCurrentLanguage()->getId();
$urlLoginGuideLink = Url::fromUserInput('/');
if ($lang_code == 'en') {
$urlLoginGuideLink = Url::fromUserInput('/en/login-guide');
}
elseif ($lang_code == 'nl') {
$urlLoginGuideLink = Url::fromUserInput('/inloghulp');
}
$loginGuideLink = Link::fromTextAndUrl($this->t('login guide'), $urlLoginGuideLink);
$form['information']['card']['card-body']['q3'] = [
'#type' => 'details',
'#title' => $this->t('Where can I find more information on how to use SMS security?'),
'#value' => $this->t('Read the @loginGuideLink for help with SMS security.',
[
'@loginGuideLink' => $loginGuideLink->toString(),
] ),
];
$form['setup'] = [
'#type' => 'html_tag',
'#tag' => 'div',
'#attributes' => [
'class' => ['col-md-6'],
],
];
$form['setup']['sms'] = [
'#type' => 'html_tag',
'#tag' => 'section',
'#attributes' => [
'class' => ['card'],
],
];
$form['setup']['sms']['card-body'] = [
'#type' => 'html_tag',
'#tag' => 'div',
'#attributes' => [
'class' => ['card-body'],
],
];
$form['setup']['sms']['card-body']['phone-number'] = [
'#type' => 'phone_number',
'#title' => $this->t('Phone number'),
'#default_value' => ['country' => 'NL'],
];
$base_form = $this->getForm($form, $form_state);
$form['setup']['sms']['card-body']['phone-number']['#description'] = $this->t('Select your country and fill in your phone number.');
$form['setup']['sms']['card-body']['send-sms-message'] = $base_form['setup']['sms']['card-body']['send-sms-message'];
$form['setup']['sms']['card-body']['send-sms'] = $base_form['setup']['sms']['card-body']['send-sms'];
$form['setup']['input'] = [
'#type' => 'html_tag',
'#tag' => 'section',
'#attributes' => [
'class' => ['card'],
],
];
$form['setup']['input']['card-body'] = [
'#type' => 'html_tag',
'#tag' => 'div',
'#attributes' => [
'class' => ['card-body'],
],
];
// Include code entry form.
$form['account'] = $base_form['account'];
$form['setup']['input']['card-body']['code'] = $base_form['setup']['sms']['card-body']['code'];
$form['setup']['input']['card-body']['login'] = $base_form['setup']['sms']['card-body']['login'];
// Alter button text.
$form['setup']['input']['card-body']['actions']['login']['#value'] = $this->t('Confirm');
// Alter code title & description.
$form['setup']['input']['card-body']['code']['#title'] = $this->t('SMS code');
$form['setup']['input']['card-body']['code']['#description'] = $this->t('Enter the 6-digit security code you received on your phone.');
return $form;
}
The error does not occur in previous versions of the module (before 2.0.0-alpha4).