Country code icon and js issue

Please try above patch for the issue.

After applying patch please make sure to flush caches.

Thank you.

It looks like this patch is adding a regression issue. The change here https://git.drupalcode.org/project/mobile_number/-/commit/e8939cb64cc074... is removing the hidden token value. Which results in a verification error.

Instead of looping through the elements, it should get triggered on the `click` event ( As it used to previously )

I think here are two unrelated problems: the OP appears to be having issues loading jQuery (probably a JS general problem), which might be helped by changing $ for jQuery as in the proposed patch.

I, however, have bumped into the issue of the flags not loading, etc. with an error in the setCountry function within mobile-number-form-element.js.

It turns out that sometimes, on first load, the setCountry function gets called with a null value before setting itself correctly to the chosen default value. In those cases, the script breaks and the flags never load, etc.

I will be posting a patch here later today, but wanted to leave a heads up, the quick workaround is to check if the value is null and return the function in other to prevent the errors from breaking the functionality.

as in:

function setCountry(country) {
          if(!country){
            return;
          }

          $input.parents('.country-select').find('.mobile-number-flag').removeClass($input.data('value'));
          $input.parents('.country-select').find('.mobile-number-flag').addClass(country.toLowerCase());
          $input.data('value', country.toLowerCase());

          var options = $input.get(0).options;
          for (var i = 0; i < options.length; i++) {
            if (options[i].value === country) {
              var prefix = options[i].label.match(/(\d+)/)[0];
              $input.parents('.country-select').find('.prefix').text('(+' + prefix + ')');
            }
          }
        }