reactjsmulti-selectantd

Multi-select with Select all Option in ANTD React


I have a form in which there is a multi select dropdown antd component . On change of the select all option , I need to select all the options available with max of 5 tags .

Please find the link of my code in codesandbox here https://codesandbox.io/s/summer-wind-1swto

Max tag of 5 is sepecified with handleSelectAll function is called on select of options

<Form.Item label= 'Column Names'>
                  {getFieldDecorator(`columnNames`, {
                    validateTrigger: ['onChange', 'onBlur'],
                    rules: [
                      {
                        required: true,
                        message: "Please input the Column Names!",
                      },
                    ],
                  })(
                    <Select
                        mode="multiple"
                        placeholder="Please select Columns"
                        maxTagCount={5}
                        onChange={this.handleSelectAll}
                        >
                          <Option key="all" value="all">---SELECT ALL---</Option>
                        {children}
                        </Select>
                  )}
</Form.Item>

Expected:

On select all is clicked all the options to be selected
On unchecking it all options to be removed

Solution

  • In your case, setFieldsValue is not working. But you can use getValueFromEvent.

    handleSelectAll = (value) => {
        if (value && value.length && value.includes("all")) {
            if (value.length === all.length + 1) {
                return [];
            }
            return [...all];
        }
        return value;    
    }
    
    <Form.Item label='Column Names'>
        {getFieldDecorator(`columnNames`, {
            validateTrigger: ['onChange', 'onBlur'],
            getValueFromEvent: this.handleSelectAll,
            rules: [
                {
                    required: true,
                    message: "Please input the Column Names!",
                },
            ],
        })(
            <Select
                mode="multiple"
                placeholder="Please select Columns"
                maxTagCount={5}
                onChange={this.handleSelectAll}
            >
                <Option key="all" value="all">---SELECT ALL---</Option>
                {children}
            </Select>
        )}
    </Form.Item>
    

    This will work. handleSelectAll event returns the value assigned using getValueFromEvent and initialized the select component.