Component from custom plugin is not recognized

OS: Windows 10 x64
Browser: Chrome 72.0.3626.121 x64
GrapesJS: v0.14.55

Hello, I have some custom components (bootstrap tabs) in a plugin, for some reason some of the components of the plugin are not being detected by GrapesJS when loading it from the container elements, and others via dragging and dropping into the editor.

### This Component is not being detected:

    const defaultType = dc.getType('default');
    const defaultModel = defaultType.model;
    const defaultView = defaultType.view;
    const {tabPanesName, tabPaneSelector} = constants;
    const classId = config.classTabPanes;
    const type = tabPanesName;

    dc.addType(type, {

        model: defaultModel.extend({
            defaults: {
                ...defaultModel.prototype.defaults,
                name: 'Tab Content',
                copyable: 0,
                draggable: true,
                droppable: tabPaneSelector,
            },
        }, {
            isComponent(el) {
                if (elHasClass(el, 'tab-content')) {
                    return {type};
                }
            },
        }),

        view: {removed because too big for issue},
    });

### But this one is:

    const defaultType = dc.getType('default');
    const defaultModel = defaultType.model;
    const defaultView = defaultType.view;
    const { navigationName, tabSelector } = constants;
    const type = navigationName;

    dc.addType(type, {

        model: defaultModel.extend({
            defaults: {
                ...defaultModel.prototype.defaults,
                name: 'Navigation',
                copyable: 0,
                draggable: true,
                droppable: tabSelector,

                traits: [
                    {
                        type: 'class_select',
                        options: [
                            {value: 'nav-tabs', name: 'Tabs'},
                            {value: 'nav-pills', name: 'Pills'},
                        ],
                        label: 'Type',
                    },
                    {
                        type: 'class_select',
                        options: [
                            {value: '', name: 'Left'},
                            {value: 'nav-fill', name: 'Fill'},
                            {value: 'nav-justified', name: 'Justify'},
                        ],
                        label: 'Layout',
                    },
                ],
            },
        }, {
            isComponent(el) {
                if (el.className && el.getAttribute('role') === 'tablist') {
                    return {type};
                }
            },
        }),

        view: {removed because too big for issue},
    });

### Init code

    var editor = grapesjs.init({
        height: '100%',
        showOffsets: 1,
        noticeOnUnload: 0,
        storageManager: { autoload: 0 },
        container: '#gjs',
        fromElement: true,
        showDevices: false,
        plugins: ['grapesjs-blocks-bootstrap4'],
        pluginsOpts: {
          'grapesjs-blocks-bootstrap4': {
            blocks: {},
            blockCategories: {},
            labels: {},
            gridDevicesPanel: true,
            formPredefinedActions: [
              {name: 'Contact', value: '/contact'},
              {name: 'landing', value: '/landing'},
            ]
          }
        },
        canvas: {
          styles: [
            'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'
          ],
          scripts: [
            'https://code.jquery.com/jquery-3.3.1.slim.min.js',
            'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js',
            'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'
          ],
        }
      });
      window.editor = editor;

### HTML
This is the HTML thats inside the #gjs element and that GrapesJS should parse into components:

    <div class="container">

        <!-- Tab navigation -->
        <ul class="nav nav-tabs" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
          </li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
          <div class="tab-pane active" id="home" role="tabpanel">Home</div>
          <div class="tab-pane" id="profile" role="tabpanel">Profile</div>
          <div class="tab-pane" id="messages" role="tabpanel">Messages</div>
          <div class="tab-pane" id="settings" role="tabpanel">Settings</div>
        </div>

      </div>

    </div>

### Problem
The problem seems to be in the isComponent(el) method, the "el" parameter is never that  particular element so it never returns the valid type.

What could the issue be?