DomHandler functions throw NPE on components

[chocobloc]

[x] bug report

DomHandler.js:186 Uncaught TypeError: Cannot read property 'classList' of null
    at Function.removeClass (DomHandler.js:186)

TypeError: Cannot read property 'classList' of null
Function.removeClass
C:/sources/udemy-react/crm/node_modules/primereact/components/utils/DomHandler.js:186
  183 |   key: "removeClass",
  184 |   value: function removeClass(element, className) {
  185 |     //	  if (element !== null) {	
> 186 |     if (element.classList) element.classList.remove(className);else element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
  187 |   } //	}
  188 | 
  189 | }, {
**Codesandbox Case (Bug Reports)**

Please fork the codesandbox below and create a case demonstrating your bug report. Issues without a codesandbox have much less possibility to be reviewed.

https://codesandbox.io/s/qjx332qq4

Please forgive me, I'm way too lazy to copy all my source code over to that.


**Current behavior**
<!-- Describe how the bug manifests. -->
'
**Minimal reproduction of the problem with instructions**

I'm getting a type error when I use the editor function of a DataTable column
i.e.:

                        <DataTable value={this.state.selectedRecord}>
                            <Column 
                                field="title" 
                                header="FIELDNAME" 
                                rowSpan={5} 
                            />
                            <Column 
                                field="value" 
                                header="VALUE" 
                                editor=**{this.vneEditor}** 
                                onEditorSubmit={(e) => this.dbUpdate(e)} 
                            />

this.vneEditor replaces text boxes by InputText or DropDown components by clicking on the relevant row of a dialog box. When changing from one DropDown menu to another one, ONLY AFTER I carried out a value change in the first DropDown AND ONLY IF I go from the first to the second DropDown. Yes indeed, if I do the change in the second component and then go to the first it's ok.

Unfortunately I can't give you more hints other than this. Of course I can share a piece of source code:


    vneEditor = (props) => {
    
        const currentProp = `${props.rowData.key}`;
        const requiredComponent= frameSet(this.state.tbs).cols[currentProp].requiredComponent;
        if (requiredComponent === 'InputText') 
            return <InputText 
                        type="text" 
                        value={props.rowData.value} 
                        onChange={(e) => this.onEditorValueChange(props,e.target.value)}
                    />;
        else if (requiredComponent === 'DropDown') {
            if (currentProp !== this.state.currentProp) { // so if the dropdown select options have to change:
                const suffix = frameSet(this.state.tbs).cols[currentProp].axios;
                const self = this;
                axios.get(suffix)
                .then(response => {
                    const fieldOptions = response.data;
                    self.setState({fieldOptions});
                    self.setState({currentProp});
                })
                .catch(error => {
                    console.log(error);
                });	
            }
            const placeholder = String(props.rowData.value);
            return <Dropdown
                        style={{marginTop:'-2px',width:'250px'}}W
                        value={props.rowData.value}
                        options={this.state.fieldOptions}
                        onChange={(e) => this.onEditorValueChange(props,e.target.value)}
                        placeholder={placeholder} 
                    />
            }
        else 
            return <InputText type="text" value={props.rowData.value} disabled={true}/>
    }


**Expected behavior**
<!-- Describe what the behavior would be without the bug. -->
Without it you could simply flip forth and back between two dropdown components, make changes without that error to happen.

There's an easy fix for the problem, it's gone after adding an if-statement to /primereact/components/utils/DomHandler.js:

    key: "removeClass",
    value: function removeClass(element, className) {
	  **if (element !== null) {**	
		if (element.classList) element.classList.remove(className);else element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
	  }
	**}**


**Please tell us about your environment:**
<!-- Operating system, IDE, package manager, HTTP server, ... -->
{
  "name": "crm",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "classnames": "^2.2.6",
    "primeicons": "^2.0.0",
    "primereact": "^3.3.2",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-redux": "^7.1.1",
    "react-router": "^5.1.0",
    "react-router-dom": "^5.1.0",
    "react-scripts": "3.1.2",
    "react-thunk": "^1.0.0",
    "react-transition-group": "^4.3.0",
    "redux": "^4.0.4",
    "redux-thunk": "^2.3.0",
    "save": "^2.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
I'm working on Windows 10.




* **React version:**
<!-- Check whether this is still an issue in the most recent React version -->
pls check above
* **PrimeReact version:**
<!-- Check whether this is still an issue in the most recent PrimeReact version -->
pls. check above
* **Browser:** [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
<!-- All browsers where this could be reproduced -->
 chrome / firefox
* **Language:** [all | TypeScript X.X | ES6/7 | ES5]

[mertsincan]

Thanks a lot for the code block.

Best Regards,