Getting error SyntaxError: nothing to repeat in JS console when a field with mask applied is replaced via ajax update.
I am not exactly sure the steps minimal steps, but I have a mask field that I am using the following mask 999-99-9999
This is field is on an entity that I am including inline using the inline_entity_form simple on another entity form. Then using ajax triggered from a change on another field, I update the referenced entity on the parent entity and return that field via the ajax callback.
$response = new AjaxResponse();
$response->addCommand(new ReplaceCommand('#sf_field_customer', $form['field_customer']));
return $response;
The mask works on initial load, the error appears when the ajax completes the update.
I am certain that the issue is with the $.jMaskGlobals.translation being incorrect after the ajax.
That object is initialized when the js file loads using
for (var symbol in drupalSettings.mask.translation) {
var options = drupalSettings.mask.translation[symbol];
options.pattern = new RegExp(options.pattern);
$.jMaskGlobals.translation[symbol] = options;
}
You can see the line var options = drupalSettings.mask.translation[symbol]
That line is setting options by reference since the drupalSettings.mask.translation[symbol] is an object. This only happens when the js loads and not every attach behavior. So, when the ajax happens the drupalSettings update and I think since they are referenced in $.jMaskGlobals that also updates. But the RegExp(options.pattern) is not called again. This makes the options.pattern part of the $.jMaskGlobals gets reset back to a string rather than a RegExp. Then the jquery mask plugin tries to use that and fails. (I THINK). This was kind of hard to try to diagnose. I assume the inline entity form and other things are irrelevant to the problem, I think probably just ajax updating any form element with a mask might be an issue.
Just move the init code into the attach so it gets repeated each time
OR
maybe change to
var options = JSON.parse(JSON.stringify(drupalSettings.mask.translation[symbol]));
This would clone the object rather than referencing it.
also you would have to change the line
translation: drupalSettings.mask.translation
to
translation: $.jMaskGlobals.translation
because now that $.jMaskGlobals and drupalSettings are not referencing the same object, the drupalSettings var will still just have a string for a pattern rather than the RegExp.
I actually used this second option to fix my problem. Did not test the first option.
I hope this helps someone. I am using the alpha module, but it looks like this issue exists in even the newest version.
Active
Code
Here's a patch that takes the first approach. In my opinion this is better because it's also possible that the drupal JS settings are changed in between multiple ajax updates.