Remove console error “Uncaught TypeError: Cannot read properties of undefined (reading ‘setAttribute’)”

Here is the solution for removing console error uncaught type error cannot read property set attribute of undefined

When we create a custom ui component in Magento 2, it shows the console error “Uncaught TypeError: Cannot read properties of undefined (reading ‘setAttribute’)” in the chrome browser. This error comes due to the bootstrap.js file conflict with the installed theme in our project.

When we click on the down arrow on multiple id selector of UI grid, the uncaught type error appears on the console.

The issue can be fixed by overriding the multiselect.html file from the Magento vendor folder to the installed theme in :

Vendor file location :

vendor/magento/module-ui/view/base/web/templates/grid/columns/multiselect.html

You can read more about multiselect components in Magento on here.

You can create a new theme in magento and override multiselect.html file inside the theme. To do so, you can create a custom theme by follwing these steps:

Create custom theme

Here are the steps to create a custom theme in magento 2 :

1) Firstly, Create registration.php file inside app/design/frontend/Vendor/ThemeName/ and paste this code to register the theme into your store :

<?php

use \Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/Vendor/ThemeName', __DIR__);

2) Secondly, to configure the custom theme you have to create theme.xml file inside app/design/frontend/Vendor/ThemeName

After creating theme.xml paste this code in file:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Custom Theme</title>
    <parent>Magento/blank</parent>
    <media>
        <preview_image>media/previewimg.png</preview_image>
    </media>
</theme>

Make sure you have added previewimg.png file inside app/design/frontend/Vendor/ThemeName/media/ directory of the theme.

Finally, run these commands in sequence and your theme will be registered:

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

3- After this, log into the admin panel of your site and check if your theme is in the theme list.

To do this Go to Admin > Content > Design > Themes

Now, to apply your custom theme go to this location in the admin menu :

Admin > Content > Design > Configuration and select your theme.

Now, run the Magento cache flush command again. Afterward, your theme will reflect in frontend

Theme file location where you have to override the file:
app/design/frontend/Vendor/ThemeName/Magento_Ui/web/templates/grid/columns/multiselect.html

Now remove the attribute data-toggle=”dropdown” from the following code.

<th class="data-grid-multicheck-cell">
    <div class="action-multicheck-wrap" css="_disabled: !totalRecords()" collapsible="">
        <input class="admin__control-checkbox" type="checkbox"
            data-bind="
                checked: allSelected(),
                attr: {id: ++ko.uid},
                event: { change: togglePage },
                css: { '_indeterminate': indetermine },
                enable: totalRecords">
        <label attr="for: ko.uid"/>
        <!-- <button class="action-multicheck-toggle" data-toggle="dropdown" data-bind="css: { '_active': $collapsible.opened }, -->
        <button class="action-multicheck-toggle" data-bind="css: { '_active': $collapsible.opened },
                       enable: totalRecords,
                       toggleCollapsible">
            <span translate="'Options'"/>
        </button>
        <ul class="action-menu" each="actions" closeCollapsible="">
            <li data-bind="click: $parent[value].bind($parent),
                           visible: $parent.isActionRelevant(value)">
                <span class="action-menu-item" text="label"/>
            </li>
        </ul>
    </div>
</th>

The code should look like this after removing data-toggle attribute –

<th class="data-grid-multicheck-cell">
    <div class="action-multicheck-wrap" css="_disabled: !totalRecords()" collapsible="">
        <input class="admin__control-checkbox" type="checkbox"
            data-bind="
                checked: allSelected(),
                attr: {id: ++ko.uid},
                event: { change: togglePage },
                css: { '_indeterminate': indetermine },
                enable: totalRecords">
        <label attr="for: ko.uid"/>
        <!-- <button class="action-multicheck-toggle" data-bind="css: { '_active': $collapsible.opened }, -->
        <button class="action-multicheck-toggle" data-bind="css: { '_active': $collapsible.opened },
                       enable: totalRecords,
                       toggleCollapsible">
            <span translate="'Options'"/>
        </button>
        <ul class="action-menu" each="actions" closeCollapsible="">
            <li data-bind="click: $parent[value].bind($parent),
                           visible: $parent.isActionRelevant(value)">
                <span class="action-menu-item" text="label"/>
            </li>
        </ul>
    </div>
</th>

After this, Run the cache flush command and refresh the browser.

php bin/magento cache:flush

After the cache flush command , the uncaught type error cannot read property set attribute of undefined error will removed.

Also, you can also check how to override theme file in magento 2 by following the link – https://webkul.com/blog/override-phtml-file-magento2/