material-ui-superselectfield: Unable to change data

We are attempting to use two select fields, one to select states and another to select counties. The state select field is pre-populated, that is, it just always has the list of 50 states.

The list of counties is initially blank. Depending on the state the user selects, the list of counties would then get populated only with the counties from the state(s) that are selected.

The issue is, this doesn’t work. If we give see a select field a blank list, and then later update it with a list of children, it doesn’t update and no options appear in the drop-down. Here is the select field in the render function():

<SuperSelectField
    name="Hi"
    hintText="Testing..."
    multiple
    checkPosition='left'
    selectionsRenderer={this.handleCustomDisplaySelections}>

    {this.state.items}

  </SuperSelectField>

Initially, this.state.items is set to:

        var items = [];
        return items;

Then, we change the list after 3 seconds:

componentDidMount = () => {
        window.setTimeout(() => {

            var items = [];
            items.push(<div key="Hello" value="Hello">Hello</div>);
            items.push(<div key="Again" value="Again">Again</div>);

            this.setState({
                items: items
            })
            console.log('updated')
        }, 3000);
    };

There is no error in the console, but the control will not allow us to select anything. It just doesn’t work, the drop-down never opens.

If, instead, I populate the select field initially with some data like this:

        var items = [];
        items.push(<div key="Hi" value="Hi">Hi</div>);
        items.push(<div key="World" value="World">World</div>);
        return items;

Then it works. So I would see the two options ‘Hi’ and ‘World’ in the drop-down, and then after 3 seconds, I see the ‘Hello’ and ‘Again’ options.

So giving the select field a blank list, and then later populating it with data does not work. The expected behavior, of course, is that the drop down gets the new values when they are specified.