Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Node forms that include a Date field and a field with unlimited values cause error: Maximum call stack size exceeded. #1037

Open
sotiropo opened this issue Feb 11, 2022 · 2 comments · May be fixed by #1452

Comments

@sotiropo
Copy link

sotiropo commented Feb 11, 2022

Create a node content type with a Date input field and a field with unlimited "Allowed number of values". For example a URL input field.Select view widget for Date field as "Date and time" which applies the Datepicker input for the Date field.
Make the node access public or authorized in order to use oe_theme in the frontend as a signed-in user.
Next, open the node edit form. Input a date with the Datepicker field and then click on "Add" button to add an extra field input for the multivalue field ( For example add 2 URLs in the node ).

Result: The form will produce the JS error: ecl-ec.js?r74vg1:2 Uncaught RangeError: Maximum call stack size exceeded.
After a while the form page becomes unresponsive and the browser window crashes.

In our case, we are using a Publication node type with a publication date input field and a multivalue Paragraph field "Author".
image
image
image

@horaciolopesqq
Copy link

horaciolopesqq commented Feb 22, 2022

We've faced this as well, IIRC it's due to bigpipe.

custom_module.module

/**
 * Implements hook_library_info_alter().
 */
function custom_module_library_info_alter(&$libraries, $extension) {
  if ($extension == "oe_theme") {
    $path = \Drupal::service('module_handler')->getModule('custom_module')->getPath();
    // Override ecl_datepicker because it breaks in authored on date field.
    if (isset($libraries['ecl_datepicker'])) {
      unset($libraries['ecl_datepicker']['js']['js/ecl_datepicker.js']);
      $libraries['ecl_datepicker']['js']["/{$path}/ecl_datepicker_patch.js"] = [];
    }
  }
}

ecl_datepicker_patch.js

/**
 * @file
 * ECL Datepicker initializer.
 */
(function (ECL, Drupal) {
  Drupal.behaviors.eclDatepicker = {
    attach: function attach(context, settings) {
      if (context === document) {
        var elements = document.querySelectorAll('[data-ecl-datepicker-toggle]');
        for (var i = 0; i < elements.length; i++) {
          var datepicker = new ECL.Datepicker(elements[i], {
            format: settings.oe_theme.ecl_datepicker_format
          });
          datepicker.init();
        }
      }
    }
  };
})(ECL, Drupal);

The js version in the following link would probably work too.
#646

@pmoutsophypertech
Copy link

Alternatively, you can use the changes in #1452 and use Drupal core's once function.

Patch: https://patch-diff.githubusercontent.com/raw/openeuropa/oe_theme/pull/1452.diff

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants