ComboBox: Sends onChange when cleared

[jfisher-bentley]

Describe the bug (actual behavior)

Setup a ComboBox with some options and a button. Have a state variable tracking the current value of the ComboBox selection which gets set by the onChange of the ComboBox. Set the button's onClick to set the state variable to null. When this happens, the render function will pass the ComboBox a value of null, and the ComboBox immediately fires an onChange event but with the value that was selected before the clear button was hit.

Expected behavior

Either the onChange event shouldn't be fired or it should be passing the value that was just set.

Additional information

Using @itwin/itwinui-react 1.40.0 This can be worked around as follows:

    render() {
        const options = this.state.visibleProperties.filter(p => this.props.typeFilter.indexOf(p.TypeName) !== -1).map(p => {
            return { value: p.Name, label: p.DisplayLabel, sublabel: Utilities.getSublabelForType(p.TypeName) }
            });

        return (
            <div style={this.props.style}>
                <ComboBox
                    options={options}
                    inputProps={{
                        placeholder: this.props.placeholder,
                        disabled: this.props.disabled,
                        onFocus: this.onFocus
                    }}
                    value={this.state.value}
                    filterFunction={this.filter}
                    onChange={this.onChange}
                    className="BindingSelectComboBox"
                    emptyStateMessage={ this.props.emptyStateMessage ?? Localize.translate("NO_OPTIONS_FOUND") } />
                  <IconButton
                      as="button"
                      className="BindingSelectButton"
                      onClick={this.onClear}>
                      <SvgClose />
                  </IconButton>
            </div>
        );
    }

    onChange(value: string) {
        if (this.state.onChangeWorkAround) {
            this.setState({ onChangeWorkAround: false });
            return;
        }

        this.setState({value: value});
    }

    onClear() {
        this.setState({value: null, onChangeWorkAround: true});
    }

[jfisher-bentley]

Also happens when changing the value programmatically in general, not limited specifically to clearing the selection

[gretanausedaite]

Hi, @jfisher-bentley! We worked on combobox reset functionality in v1.41.0. I believe that should have fixed your issue. You'll need to make sure to memoize your options as we are still investigating some issues with it.

[jfisher-bentley]

Confirmed, this is resolved in v1.41.0