Dropdown breaks when changing operator

[GUU]

Hi,

I'm using ruleTemplate to layout my own controls for the query builder. I have a problem when changing the operator.

I have added a new dropdown in between the field and the operators dropdowns. The error is pretty obscure so I don't know what to fix. Could you guide me to a possible cause?

The code for the template is:

<div className="e-rule e-rule-template">

                <div className="e-rule-filter">

                    <DropDownListComponent

                        change={this.fieldChange}

                        fields={fields}

                        dataSource={this.state.columns}

                        value={this.state.rule.field}

                    />

                </div>

                <div className="e-rule-filter">

                    <DropDownListComponent

                        change={this.updateComparison}

                        fields={fields}

                        dataSource={comparisonOptions}

                        value={this.state.comparisonOption}

                    />

                </div>

                        <div className="e-rule-filter">

                            <DropDownListComponent

                                change={this.operatorChange}

                                fields={this.state.operatorFields}

                                dataSource={this.state.operators}

                                value={this.state.rule.operator}

                            />

                        </div>

                        <div className="e-rule-value e-value e-custom-value">

                            <NumericTextBoxComponent

                                min={null}

                                format="0"

                                change={this.valueChange}

                                value={this.state.rule.value}

                            />

                        </div>

</div>

operatorChange = event => {

        this.props.queryBuilder.notifyChange(event.value, event.element, 'operator')

    }



Thanks!

[Sangeetha Priya Murugan]

Hi GUU,

We need to validate more on your reported issue, and we will update you the further details on April 4^th 2022.

Regards,

Sangeetha Mse

[Sangeetha Priya Murugan]

Hi GUU,

We suggest you to set the id for numeric text box component as like as below to avoid this issue in your end.

   <NumericTextBoxComponent

            id={args.ruleID + '_value'}

            min={null}

            format="0"

            change={this.valueChange}

            value="1"

          />

For your convenience, we have prepared the sample based on our suggestion for rule template in EmployeeID column. Please find the link below.

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

Could you please check the above sample and get back to us? If you need any further assistance on this.

Regards,

Sangeetha M