Topic: input.js Error When Displayed Inside Data Table

gshell free asked 2 years ago


Expected behavior

Javascript for input controls within data table cells should render just as it does elsewhere without error.

Actual behavior

When input controls that are contained within data tables get focus, the below error occurs and the input control's outline and label does not render properly.

    Uncaught TypeError: Cannot read property 'style' of null
        at t.value (input.js:150)
        at t.value (input.js:187)
        at t.value (input.js:163)
        at HTMLInputElement.<anonymous> (input.js:201)
        at HTMLDocument.e (event-handler.js:120)

Resources (screenshots, code snippets etc.)

Javascript:

    const columns = [
        { label: 'Tool Type ID', field: 'toolTypeID', width: 0, editable: false },
        { label: 'Tool Type', field: 'toolTypeName' },
        { label: 'Is Approved', field: 'isApproved', inputType: 'checkbox' },
        { label: 'Submitted By', field: 'approvingUser' },
        { label: 'Approved By', field: 'submittingUser' },
        { label: 'Error', field: 'error' }
    ];
    const asyncTable = new mdb.Datatable(
        document.getElementById('datatable'),
        {
            columns: columns,
        },
        {
            loading: true,
            hover: true,
            sm: true,
            fullPagination: true,
            fixedHeader: true
        }
    );
    const loadData = () => {
        fetch('ToolTypes/GetToolTypes')
            .then((response) => response.json())
            .then((data) => {
                asyncTable.update(
                    {
                        rows: data.map((toolTypes) => ({
                            toolTypeID: toolTypes.toolTypeID,
                            toolTypeName: toolTypes.toolTypeName,
                            isApproved: toolTypes.isApproved,
                            approvingUser: toolTypes.approvingUser.userName,
                            submittingUser: toolTypes.submittingUser.userName,
                            error: '<div class="form-outline"> <input type="text" id="test" class="form-control" required /> <label class="form-label" for="test" + name">Test</label> </div>'
                        })),
                    },
                    { loading: false }
                );
            });
    };

This is how the input control renders, with the label overlapping the input and no outline


Mikołaj Smoleński staff answered 2 years ago


Dynamic input loading needs an additional initialization. Here's the documentation of that case: https://mdbootstrap.com/docs/standard/forms/input-fields/#section-dynamic-input-initialization

Best regards



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 2.0.0
  • Device: Windows Desktop
  • Browser: Chrome Version 86.0.4240.75
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags