Error on setting inital value in multiselect

[Satheesh Kumar]

Hi

I am using a multiselect component with filtering enabled. Please refer the link

  Xgla8b (forked) - StackBlitz

I have set an initial value. I clicked dropdown icon for opening the dropdown. Without selecting any item, I clicked on the window outside the dropdown to close it. I am getting an error as shown.

This error doesn't appear if initial value is not set. Please let me know what is the cause.

Also in the same example, I would like to implement virtual scroll. Can you please help me on that too?

Thanks

[Sureshkumar P]

Hi Satheesh,

In our multiselect component value property type is array of string/integer type. So we suggest you assign the value property as array instead of normal string as mentioned in the below code to resolve the issue.

Find the modified code example here:

 <MultiSelectComponent

                id="remoteData"

                dataSource={this.data}

                query={this.query}

                fields={this.remoteFields}

                //sortOrder="Ascending"

                placeholder="Select names"

                value={[1]}

                mode="CheckBox"

                showDropDownIcon={true}

                filterBarPlaceholder="Search countries"

                closePopupOnSelect={false}

                filterType="Contains"

                allowFiltering

              >

                <Inject services={[CheckBoxSelection]} />

              </MultiSelectComponent>

 

Find the modified sample here: https://stackblitz.com/edit/react-mzpeqh-dpcxqk?file=index.js

Regards,

Sureshkumar P

[Satheesh Kumar]

Thank you for your quick response. Can I set entire object in value property? I want to save the entire selected row object on selecting items and want to send the same to server.

You can refer the link  Xgla8b (forked) - StackBlitz

[Satheesh Kumar Balasubramanian]

Hi Satheesh,

We cannot pass the full object as value property, but we can get the full object data by select event argument. By using this select event you can achieve your requirement.

Find the screen shot here:

Find the sample here: https://stackblitz.com/edit/react-mzpeqh-ojwq7z?file=index.js

Regards,

Sureshkumar P

[Satheesh Kumar]

Ok. Thanks for your update. Let me check onto it.

[Sureshkumar P]

Satheesh,

Thanks for your update.

Regards,

Sureshkumar P