using `onChange` causes the page to hang

[dimak]

When I try to use the onChange binding, the page freezes up until I make my first change on the select. Then the page behaves relatively normally. I think there is some kind of circular checking that happens, when using this handler. onSelect seems to do the trick, not causing hanging.

On a separate note, when trying to test the functionality with enzyme, simulate('change') seems to not work, most likely because I'm using onSelect instead of onChange.

Stack trace:

Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at RegExp.[Symbol.replace] (native)
    at String.replace (native)
    at Function.htmlPrefilter
    at jQuery.fn.init.<anonymous>
    at access
    at jQuery.fn.init.html
    at DecoratedClass.Placeholder.createPlaceholder
    at DecoratedClass.createPlaceholder
    at DecoratedClass.Placeholder.update
    at DecoratedClass.update

Please let me know if you need more details, thanks.

Addendum:
My value is '', but my data does not contain this value. I think this is what is causing the infinite loop.

[rkit]

1. Can you show example code for reproducing that?
2. What kind of version do you have?

[dimak]

approximate code:

...
constructor(props) {
  super(props);
  this.state = {
    fields: {
      name: '',
      address: '',
      country: ''  // value is set to empty string
    }
  }

  this.countries = [  // does not contain an `id` with empty string
    { id: 'USA', text: 'United States' },
    { id: 'CAN', text: 'Canada' },
    { id: 'CHN', text: 'China' },
    ...
  ]
}

...

handleOnChange(e) {
  const target = e.target;
  const fields = { ...this.state.fields, [name]: value };
  this.setState({ fields });
}

...

render() {
  return (
    <div>
      <FormGroup>
        <ControlLabel>Name</ControlLabel>
        <FormControl
          type='text'
          placeholder='Name'
          name='name'
          value={this.state.fields[name]}
          onChange={this.handleOnChange}
        />
      </FormGroup>
      <FormGroup>
        <ControlLabel>Address</ControlLabel>
        <FormControl
          type='text'
          placeholder='Address'
          name='address'
          value={this.state.fields[name]}
          onChange={this.handleOnChange}
        />
      </FormGroup>
      <FormGroup>
        <ControlLabel>Country</ControlLabel>
        <Select2
          value={this.state.fields.iso_country}
          name='country'
          onChange={this.handleOnChange}
          data={this.countries}
          options={{
            placeholder: 'Country'
          }}
        />
      </FormGroup>
    </div>
  )
}

version: "react-select2-wrapper": "^1.0.4-beta2"

[rkit]

Thanks for this code. This will be fixed soon.

[rkit]

Please, try a new beta release 1.0.4-beta3

[dimak]

Sorry for taking so long to reply. The initial hanging issue is resolved, however, now it hangs when a selection is made from the select2.

FYI: The only changes I've made to the code, is switching from using onSelect to using onChange.

Thanks again.

[chrisrichard]

I'm seeing what I think is the same issue, although the page doesn't completely hang, I'm just unable to scroll after making a selection that gets handled by onChange. Using onSelect seems to work fine so thanks @dimak for the workaround.

[rkit]

@dimak @chrisrichard, Guys, I can't reproduce this. Can you show me the example code?

[gazpachu]

I can confirm that this issue is also happening for me in beta-2 and beta-3

[v-Zer0]

@rkit @gazpachu Yes I still see this issue in beta-3

Both onSelect and onChange cause the page to hang with an eventual overflow error.

The setState call in the handleChange method causes the Select2 element to rerender. When this happens React rerenders the page infinitely because maybe the change event is probably being fired a second time?

Setting the local state on change is a pretty common practice in react... Is there a known way around this for your react-select2-wrapper?

  handleChange(e) {

    this.setState({
      errors: {...this.state.errors, ...{ [name]: undefined } },
      submitDisabled: false
    });

    const { value, name} = e.target;
    const element = this.findElement(name);

    if (element.validation) {
      this.validateOnTimeout(value, name, element);
    }
  }

<Select2
  name={ ele.name }
  multiple={ ele.config.multiple }
  data={ ele.options }
  options={ opts }
  onSelect={ this.handleChange }
/>;

@chrisrichard any pointers here?

[v-Zer0]

dimak @rkit @gazpachu @chrisrichard

To simplify my example from yesterday:

  selectChange(e) {
    console.log("Select changed");
    this.setState({...this.state});
  }
  
  render() {
    console.log("CALLING RENDER");
    return (
      <Select2 data={ [{text: "foo", id:1}] } onChange={ this.selectChange } />
    )
  }

When an option in the dropdown is selected, the results in console:

So it looks like there is an issue with the onChange event being fired too often

[rkit]

@cclifford3 thanks. I'm working on a fix.