Topic: input.js Error When Displayed Inside Data Table

gshell free asked 3 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.)


    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(
            columns: columns,
            loading: true,
            hover: true,
            sm: true,
            fullPagination: true,
            fixedHeader: true
    const loadData = () => {
            .then((response) => response.json())
            .then((data) => {
                        rows: => ({
                            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 3 years ago

Dynamic input loading needs an additional initialization. Here's the documentation of that case:

Best regards

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: 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