Problem/Motivation

I currently have a site that uses Tagify fields to select taxonomy in a Paragraph. A live site is currently using 1.2.45.

I am updating locally to 1.2.50 and the fields do not display anymore, and throw an error in the console.

drupal.js?v=10.6.3:64 Uncaught TypeError: Cannot read properties of null (reading 'classList')
    at HTMLSelectElement.<anonymous> (tagify.js?tb2j9r:902:23)
    at ce.each (jquery.min.js?v=3.7.1:2:3129)
    at ce.fn.init.each (jquery.min.js?v=3.7.1:2:1594)
    at Object.attach (tagify.js?tb2j9r:568:22)
    at drupal.js?v=10.6.3:166:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (drupal.js?v=10.6.3:162:34)
    at HTMLDivElement.<anonymous> (ajax.js?v=10.6.3:1404:18)
    at ce.each (jquery.min.js?v=3.7.1:2:3129)
    at ce.fn.init.each (jquery.min.js?v=3.7.1:2:1594)
(anonymous) @ tagify.js?tb2j9r:902
each @ jquery.min.js?v=3.7.1:2
each @ jquery.min.js?v=3.7.1:2
attach @ tagify.js?tb2j9r:568
(anonymous) @ drupal.js?v=10.6.3:166
Drupal.attachBehaviors @ drupal.js?v=10.6.3:162
(anonymous) @ ajax.js?v=10.6.3:1404
each @ jquery.min.js?v=3.7.1:2
each @ jquery.min.js?v=3.7.1:2
insert @ ajax.js?v=10.6.3:1396
(anonymous) @ ajax.js?v=10.6.3:1046
Promise.then
(anonymous) @ ajax.js?v=10.6.3:1039
Drupal.Ajax.commandExecutionQueue @ ajax.js?v=10.6.3:1036
Drupal.Ajax.success @ ajax.js?v=10.6.3:1095
success @ ajax.js?v=10.6.3:584
options.success @ jquery.form.js?v=4.3.0:281
c @ jquery.min.js?v=3.7.1:2
fireWith @ jquery.min.js?v=3.7.1:2
l @ jquery.min.js?v=3.7.1:2
(anonymous) @ jquery.min.js?v=3.7.1:2
XMLHttpRequest.send
send @ jquery.min.js?v=3.7.1:2
ajax @ jquery.min.js?v=3.7.1:2
$.fn.ajaxSubmit @ jquery.form.js?v=4.3.0:340
Drupal.Ajax.eventResponse @ ajax.js?v=10.6.3:796
(anonymous) @ ajax.js?v=10.6.3:646
dispatch @ jquery.min.js?v=3.7.1:2
v.handle @ jquery.min.js?v=3.7.1:2

Has anyone else seen this?

Issue fork tagify-3575962

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

nessthehero created an issue. See original summary.

nessthehero’s picture

nessthehero
he/him
commented
Title: select_tagify fields broken, Uncaught TypeError: Cannoy read properties of null (reading classList) » select_tagify fields broken, Uncaught TypeError: Cannot read properties of null (reading classList)
nessthehero’s picture

nessthehero
he/him
commented
Version: 1.2.50 » 1.2.46
Category: Bug report » Support request

I'm pretty certain this is due to an internal implementation, not the module itself.

We have a customization that shows several taxonomy fields and we convert them from selects into tagify fields while processing the form widget.

      // Transforming a select widget type to tagify.
      if ($form_filter['value']['#type'] == 'select') {

        $form_filter['value']['#type'] = 'select_tagify';
        $form_filter['value']['#identifier'] = $filter['field'];
        $form_filter['value']['#field_name'] = $filter['field'];
        $form_filter['value']['#cardinality'] = -1;
        $form_filter['value']['#match_operator'] = 'CONTAINS';
        $form_filter['value']['#match_limit'] = 10;

        $form_filter['value']['#default_value'] = $default_values;
      }

This worked in 1.2.45, but breaks on 1.2.46 and throws the JS error from above. Is there anything I might be missing when converting a select into a select_tagify?

I would appreciate any help, if possible. Thanks!

nickolaj made their first commit to this issue’s fork.

nickolaj opened merge request !201

nickolaj’s picture

nickolaj
Primary language Ukrainian
commented
Status: Active » Needs review

Added null checks in `tagifySelect` behavior to prevent "Cannot read properties of null (reading 'classList')" TypeError. The `document.querySelector` calls using the `identifier` dataset can return null when the identifier is missing or doesn't match a DOM element, which crashes during `attach`. The patch guards both `countSelectedTags()` and the `tagify--select` class removal.

nessthehero’s picture

nessthehero
he/him
commented
Status: Needs review » Reviewed & tested by the community

Amazing! This change fixes my issue. Thank you so much!

Marked as RTBC

gxleano’s picture

gxleano commented

Thanks both for work on this!

It will me part of next release 1.2.51

  • nickolaj committed 03bbdca3 on 1.2.x 
    Issue #3575962: Added null checks in `tagifySelect` behavior to pr...
gxleano’s picture

gxleano commented
Version: 1.2.46 » 1.2.x-dev
Status: Reviewed & tested by the community » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.