We cannot make default value in the drop down.

[MP]

Hello Engineers,

We have a use case where we open the dialog, we wanted to show one default value in the dropdown. This used to work in 24.x version however when we upgraded to 27.x this functionality stopped working. 

sending you the snippet for you to understand. This is NOT the complete code. 

import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons/check-box';

import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars/datetimepicker';

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns/drop-down-list';

import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns/multi-select';

import React, {useState } from 'react

<tr>

                    <td data-testid="players-name-label" className='e-textlabel'>Players Name</td>

                   

                     <td>

                        <MultiSelectComponent

                        className='e-field'

                        id='Player'

                        dataSource={players}

                        fields={fieldsForPlayers}

                        placeholder='choose player'

                        data-name='Player'

                        mode='Box'

                        value={args?.Player || selectedItems}

                        removing={onRemoving}

                        >

                        </MultiSelectComponent>

                    </td>

                </tr>

[Yohapuja Selvakumaran]

Hi MP,

Thank you for reaching out to us. We understand that after upgrading to version 27.x, the default value is no longer set in the MultiSelectComponent as expected, while this was functioning correctly in version 24.x.

We have reviewed your provided snippet and created a sample using version 27.x for reference. In our sample, the default value is properly set for the MultiSelectComponent. You can find the code snippet below:

Code Snippet:

 

const Filtering = () => {

  const temp = 'countries';

  let dataLocal;

  dataLocal = data[temp];

  const fields = { text: 'Name', value: 'Code' };

  const multiValue = ['AU'];

 

  return (

    <div className="control-pane">

      <div className="control-section">

        <div id="multifilter" className="control-styles">

          <label className="h4">Filtering</label>

          <MultiSelectComponent

            id="comboelement"

            value={multiValue}

            dataSource={dataLocal}

            allowFiltering={true}

            fields={fields}

            placeholder="Select countries"

          />

        </div>

      </div>

    </div>

  );

};

export default Filtering;

 

 

You can also check the live sample here:

Sample:  Lwj2a2 (forked) - StackBlitz

For further reference, you can explore the official documentation on Value Binding in the MultiSelect Component.

Documentation: https://ej2.syncfusion.com/react/documentation/multi-select/value-binding

Regards,

Yohapuja S