Masked field SyntaxError: nothing to repeat after ajax updates form element with mask

Created on 6 December 2023, 7 months ago

Problem/Motivation

Getting error SyntaxError: nothing to repeat in JS console when a field with mask applied is replaced via ajax update.

Steps to reproduce

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.

Proposed resolution

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.

πŸ› Bug report
Status

Active

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States DustinYoder

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.69.0 2024