CheckBoxSelection.onDocumentClick

[Ann Fredin]

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

[Prince Oliver]

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. 

[index.tsx] 

//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"> 

                <h4>CheckBox</h4> 

                <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]} /> 

                </MultiSelectComponent> 

            </div> 

        </div> 

    </div>); 

} 

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. 

UG Link: https://ej2.syncfusion.com/react/documentation/multi-select/checkbox/#checkbox  

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. 

Regards, 

Prince 

[Ann Fredin]

import React from "react";

import {

ListBoxComponent,

Inject,

CheckBoxSelection

} 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]} />

</ListBoxComponent>

</div>

</div>

</div>

);

}

}

//getting err in console.....

//Uncaught TypeError: Cannot read property 'contains' of undefined //at CheckBoxSelection.onDocumentClick (checkbox-selection.js:419)

[Sangeetha Priya Murugan]

 

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. 

 

Sample Link: https://stackblitz.com/edit/react-zwux39-dc6ojy?file=index.js 

 

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. 

 

Regards, 

Sangeetha M