We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date


CheckBoxSelection.onDocumentClick "contain error" in checkbox-selection.js

3 Replies

PO Prince Oliver Syncfusion Team May 9, 2019 07:15 AM UTC

Hello Ann, 

Greetings from Syncfusion support. 

We have checked the reported issue. This issue could occur when we miss to import and inject the CheckBoxSelection Module in the application. To use Multiselect control in checkbox mode, make sure that you have imported CheckBoxSelection module. Kindly refer to the following code snippet for importing CheckBoxSelection Module. 

//Import the CheckBoxSelection module from the dropdowns package 
import { MultiSelectComponent, CheckBoxSelection, Inject } from '@syncfusion/ej2-react-dropdowns'; 
. . . . . . . . . . . . . . . . . . . .  . . . . . . . . . .  
//Inject the module in rendering part 
render() { 
    return (<div id="multichecbox" className='control-pane'> 
        <div className='control-section col-lg-8'> 
            <div id="multigroup" className="control-styles"> 
                <MultiSelectComponent id="checkbox" ref={(scope) => { this.mulObj = scope; }} dataSource={this.countries} fields={this.checkFields} placeholder="Select countries" mode="CheckBox" showSelectAll={true} showDropDownIcon={true} filterBarPlaceholder="Search countries" popupHeight="350px"> 
                    <Inject services={[CheckBoxSelection]} /> 

We have attached an example for your reference, please find it in the following location: https://stackblitz.com/edit/react-2ymis2-f2e4jx  

To know more about Multiselect with check box mode, please refer the below documentation link. 

If the issue persists in your end, please share us sufficient code to replicate the issue or modify the above example and revert it to us. This will help us provide a prompt solution. 


AF Ann Fredin May 9, 2019 07:37 AM UTC

import React from "react";
import {
} from "@syncfusion/ej2-react-dropdowns";
import { ControlBase } from "./base/ControlBase";

class MListBox extends ControlBase {

defaultArgs = {
dataSource: [],
height: "250px",
selectionSettings: { showCheckbox: true }

renderControlOptions = () => {
var argsOptions = { ...this.defaultArgs, ...this.props };

return argsOptions;

render() {
return (
<div className="control-pane">
<div className="control-section">
<div id="listbox-selection">
<ListBoxComponent {...this.renderControlOptions()}>
<Inject services={[CheckBoxSelection]} />
//getting err in console.....
//Uncaught TypeError: Cannot read property 'contains' of undefined //at CheckBoxSelection.onDocumentClick (checkbox-selection.js:419)

SP Sangeetha Priya Murugan Syncfusion Team May 10, 2019 03:25 PM UTC

Hi Ann, 
Thank you for your update. 
We have checked your reported issue based on your provided code example and the listbox rendered properly in our end. For your convenience, we have prepared the sample based on the provided codes. Please find the link below. 
Before we proceed further we would like to let you know the following details. 
1. Provide detailed description of your issue. 
2. Please replicate your issue in the above sample and send back to us. 
3. Whether the console error occurs at initial load or performing any action in listbox? 
Could you please check the sample above sample and get back to us with the above requested information, based on that we will check and provide you a better solution quickly. 
Sangeetha M 

Live Chat Icon For mobile
Up arrow icon