"Cannot set property 'innerHTML' of null" error on certain themes [#3131293]

If bundle.js is loaded after drupal.js I get the following error on all pages with select forms:

Uncaught TypeError: Cannot set property 'innerHTML' of null

This also means that the Simple Hierarchial Select module stops working.

A temporary hack that sort of fixes it is adding {weight: -19} to the js load in permissions_by_term.libraries.yml, although that causes the error:

Uncaught ReferenceError: Drupal is not defined

I have experienced this error with certain bootstrap themes and the core Bartik theme.
Any ideas?

Comment	File	Size	Author
#10	3131293-claro-support-2.x.patch	261.58 KB	heikkiy
#9	3131293-claro-support-2.patch	262.72 KB	heikkiy
#6	3131293-claro-support.patch	1.09 KB	heikkiy

Comments

Comment #1

27 April 2020 at 15:15

robotjox created an issue. See original summary.

Comment #2

robotjox commented 27 April 2020 at 15:15

Issue summary:

View changes

Comment #3

robotjox commented 4 May 2020 at 15:11

Status:

Active

» Closed (works as designed)

Never mind. This turns out to be a problem with certain Bootstrap-based themes and their templates. Bartik is not affected by this as I reported earlier.

In case this helps others: what solved the problem for me was including a form-element.html.twig file in my theme's template folder.

I suspect a missing div was the culprit.

Comment #4

intrafusion

English

Edinburgh, UK

commented 16 September 2020 at 16:15

Status:

Closed (works as designed)

» Active

I am getting the exact same issue using Claro, I'm investigating a solution

The Chrome console reports:

bundle.js?v=8.9.5:8 Uncaught TypeError: Cannot set property 'innerHTML' of null
    at e.setDivHtmlByClassSelector (bundle.js?v=8.9.5:8)
    at u.renderPermissionsInfo (bundle.js?v=8.9.5:8)
    at n (bundle.js?v=8.9.5:1)
    at HTMLSelectElement.<anonymous> (bundle.js?v=8.9.5:1)
    at HTMLSelectElement.dispatch (jquery.min.js?v=3.5.1:2)
    at HTMLSelectElement.v.handle (jquery.min.js?v=3.5.1:2)
e.setDivHtmlByClassSelector @ bundle.js?v=8.9.5:8
u.renderPermissionsInfo @ bundle.js?v=8.9.5:8
n @ bundle.js?v=8.9.5:1
(anonymous) @ bundle.js?v=8.9.5:1
dispatch @ jquery.min.js?v=3.5.1:2
v.handle @ jquery.min.js?v=3.5.1:2

Comment #5

heikkiy commented 5 October 2020 at 09:07

This is most likely due to Claro changing the default classes for form-element:

Seven:
<div class="js-form-item form-item js-form-type-select form-type-select js-form-item-field-targeting form-item-field-tags">

Claro:
<div class="js-form-item form-item js-form-type-select form-type--select js-form-item-field-targeting form-item--field-tags">

Both form-type--select and form-item--field-tags have changed in Claro.

Comment #6

heikkiy commented 5 October 2020 at 09:30

Status	File	Size
new	3131293-claro-support.patch	1.09 KB

Problem seems to actually be with the following code in dom-client.protype.js which is trying to find a field with the class .form-type-item. This has changed in Claro to be .form-type--item. It would be better to use the JS class .js-form-type-item which is the same in Seven and Claro.

Attached is a patch for this.