cascade select doesn't clear

[can-acar]

I selecting the parent select object, the child select object changes, but after the parent select object cleared, then child select object is not cleared.

 <Form.Item>
                                                        <Input.Group size={"default"}>
                                                            <i className={"so-icon so-icon-default fa-envelope"}>
                                                                <FontAwesomeIcon icon={faMapMarkerAlt}/>
                                                            </i>
                                                            <Select
                                                                clearable
                                                                style={{fontSize: "1rem"}}
                                                                format="ilId"
                                                                keygen="ilId"
                                                                name="ilId"
                                                                renderItem="adi"
                                                                data={this.props.iller.list}
                                                                onFilter={text => il => il.adi.toLocaleLowerCase('TR').indexOf(text.toLocaleLowerCase("TR")) >= 0}
                                                                onChange={this.onIlHandleChange}
                                                                placeholder="İl"
                                                                required={true}
                                                                rules={[rules.required("Lütfen Seçiniz"), rules.min(1, 'Lütfen Seçiniz')]}
                                                            />
                                                        </Input.Group>
                                                    </Form.Item>

        <Form.Item defaultValue={this.state.ilceId}>
                                                        <Input.Group size={"default"}>
                                                            <Select clearable
                                                                    style={{fontSize: "1rem"}}
                                                                    multiple
                                                                    format="ilceId"
                                                                    keygen="ilceId"
                                                                    renderItem="adi"
                                                                    name="ilceId"
                                                                    data={this.state.ilceler}
                                                                    onFilter={text => ilce => ilce.adi.toLocaleLowerCase("TR").indexOf(text.toLocaleLowerCase("TR")) >= 0}
                                                                    onChange={this.onIlceHandleChange}
                                                                    placeholder="İlçeler"
                                                                    required={true}
                                                                    rules={[rules.required("Lütfen Seçiniz"), rules.min(1, 'Lütfen Seçiniz')]}
                                                            />
                                                        </Input.Group>
                                                    </Form.Item>

    onIlHandleChange = (value, item, isSelect) => {

        if (isSelect) {
            this.setState({
                ...this.state,
                ilId: item.ilId,
                ilceId: [],
                ilceler: item.ilceler
            });
        } else {
            this.setState({
                ...this.state,
                ilId: null,
                ilceler: [],
                ilceId: []
            });
        }

    };

 onIlceHandleChange = (value, item, isSelect) => {
        if (isSelect) {
            this.setState({
                ...this.state,
                ilceId: value
            })
        } else {
            this.setState({
                ...this.state,
                ilceId: []
            })
        }
    };

[nikomal]

@51tharea hi, do you mean the value of child select doesn't clear or the data?

if is value. the value of Select will be controlled by the Form. so you may need to change the form's value in onChange event.

or you can try to use the Cascader component instead of use two Select