Options not updating when new data changes...

[joetidee]

I have the following select2 component:

<Select2
                                ref={name}
                                name={name}
                                value={selectedValue}
                                className="form-control"
                                options={{
                                    minimumResultsForSearch: Infinity,
                                    dropdownAutoWidth: true
                                }}
                                data={dataArray}
                            />

When the dataArray content changes, the options in the drop-down list are not showing the latest values. I my specific case, I have three select2 components (a simple for loop will generate them) which all use the same dataArray and either none or some of the select2 components update with the latest values in dataArray. I know that dataArray contains that latest values because I console.log these out beforehand, so this seems to suggest that it is a problem with the react-select2-wrapper package (?)

I am using version 1.0.2

[rkit]

Can you tell me how you change the data? And are you sure about version 1.0.2?

[joetidee]

I am sure about the version, i.e. I ran npm list react-select2-wrapper and react-select2-wrapper@1.0.2 came back.

I have an array that holds an array for each option in the select, for example:

var arr = [];
arr[0] = [];
arr[0]['id'] = 0;
arr[0]['text'] = "Option 1";
arr[1] = [];
arr[1]['id'] = 1;
arr[1]['text'] = "Option 2";

This data is injected into each select2 that I render and in my case there are 3 select2 components:

...
render(){
    var lists = [];
    for(s=0;s<3;s++){
        lists[a] = (
            <Select2
             ref={name}
             name={name}
             value={selectedValue}
             className="form-control"
             options={{
                 minimumResultsForSearch: Infinity,
                 dropdownAutoWidth: true
             }}
             data={arr}
             />
        );
    }
    var someBlock = (<div>{lists}</div>);

    return (
        <div>
            {someBlock}
        </div>
    );
}

If I change the values in the array (and React re-renders), when I do console.log(arr) before the for loop, i.e. before any select2 components are rendered, the data always shows correctly. However, (at present) in the first of the three select2 components, the old values remain, yet in the other two select2 components tha new values are showing the new values. There have been other attempts whereby none of the three select2 components show the new values.

[rkit]

I can't reproduce this bug, can you show full example code for that? You may use code from example.

[joetidee]

Hmmm, I created a simple example too and cannot reproduce the bug either. Do you know how I can try and and resolve this... my code is too large and it is integrated with Meteor, so I cannot really provide any more examples. I tried adding console.log statements directly into the react-select2-wrapper npm package (node_modules/react-select2-wrapper/src/components/Select2.js), but they did not output anything either to the browser console or the terminal. Any suggestions would be most welcome.

[joetidee]

ok, I got console.log working within the node_modules/react-select2-wrapper/lib/components/Select2.js file. I traced the text that the was to display, within the makeOption function and it was correct just before the line:

return _react2.default.createElement('option', _extends({key: 'option-' + k, value: id}, itemParams), text);

Not sure what to check after this point?

[rkit]

I traced the text that the was to display, within the makeOption function and it was correct just before the line … Not sure what to check after this point?

This is last point.

Can you try to debug through React Developer Tools (Chrome)? http://take.ms/NuBqb — were props changed?

[joetidee]

Ok, I used the React dev tools to monitor the changes and in the dev tools the values of the select elements do change to the correct values. However, on the page itself, the correct values are not showing - what could be causing this?

[rkit]

Sorry for delays. Can you add console.log before this line ?

console.log('update', value);
this.el.val(value).trigger('change');

[joetidee]

it says update null . Note: this was in /lib, not /src folder.

[rkit]

Note: this was in /lib, not /src folder.

Yep

Can you do following:

1. Add id to Select2 component

<Select2 id="select-tags" ... />

1. Add button and click

<button onClick={() => {
  const select = document.getElementById('select-tags');
  const option = document.createElement('option');
  option.text = 'NEW_ITEM';
  option.value = '9999';
  select.appendChild(option);
}}
>
 Add new item
</button>

Was a new item created?

[joetidee]

Errr, this is wierd. So, I have 3 select elements on the page, each one I have given a unique id and each has the button that you coded above (with the unique id in the getElementById() bit). When I click ANY of the buttons, the option is ALWAYS appended to the last select element - the others are unaffected!

[joetidee]

HI there, I haven't been able to explain this behaviour - have you mananged to look to see if there is anythgin code-wise that is causing this issue?

[rkit]

Hi, I can't reproduce this case, sorry. I need example code.

[rkit]

Please, try a new pre-release 1.0.4-beta1

[joetidee]

Stupid question, but how do I update to this beta version using npm? Have tried:

sudo npm update react-select2-wrapper@1.0.4-beta1

[rkit]

npm install react-select2-wrapper@1.0.4-beta1

[joetidee]

Hmmm, did this and it came up with the line:

react-select2-wrapper@1.0.4-beta1 invalid

[rkit]

npm install react-select2-wrapper@1.0.4-beta1 --save

[joetidee]

Thanks :)