Uncaught DOMException: Element.closest: 'XXX' is not a valid selector

Created on 30 April 2024, 9 months ago
Updated 23 May 2024, 8 months ago

Problem/Motivation

On the edit form of a content type with paragraphs, every time I click anywhere on the page multiple console errors are generated:

Uncaught DOMException: Element.closest: '.field_bottom_paragraphs[2][subform][field_related_tag]' is not a valid selector

Proposed resolution

It looks like the selector doesn't account for the field being nested inside a paragraph. A possible solution could be this:

const isTagifyInput = e.target.classList.contains('tagify__input');
const isDesiredContainer = e.target.parentElement.classList.contains('tagify');
if (isTagifyInput && isDesiredContainer) {
  handleAutocomplete(
    '',
    tagify.value.map((item) => item.entity_id),
  );
}

But while we're at it, why not get rid of isDesiredContainer? Is there any possible situation where isTagifyInput is true and isDesiredContainer is false?

🐛 Bug report
Status

Closed: works as designed

Version

1.2

Component

Code

Created by

🇧🇪Belgium dieterholvoet Brussels

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

Merge Requests

Comments & Activities

Production build 0.71.5 2024