Option appears blank when added to list of options or bound this.state.options updated

[Mike Sowerbutts]

I am building an addable ComboBox - i have it mostly working, however, whenever I add a new Option, it appears, but its blank (i.e. the first Option in the list):

I am directly adding it to the ComboBox component reference using:

let customValue: string = (document.getElementById(`pick.list.${this.props.instance?.id}`) as HTMLInputElement).value;

let newItem = { id: DataUtilities.NewGuid(), text: customValue, value: customValue, isCustom: true };

this.control!.addItem(newItem, 0);

Note that the structure of the "newItem" variable is correct for the fields I am passing to the ComboBox too...

private fields: Object = { id: "id", text: "text", value: "value", isCustom: "isCustom" };

...

<ComboBoxComponent

id={`pick.list.${this.props.instance?.id}`}

ref={(ref) => {

this.control = ref;

}}

dataSource={this.state.options}

filtering={this.onFiltering.bind(this)}

allowFiltering={true}

fields={this.fields}

noRecordsTemplate={this.props.addMode ? this.noDataTemplate : ""}

itemTemplate={this.props.addMode ? this.editableItemTemplate.bind(this) : ""}

placeholder={this.getPlaceholder()}

popupHeight="270px"

value={value}

onChange={this.onChange}

allowCustom={this.props.addMode}

onBlur={this.onBlur}

//open={this.onOpen}

onFocus={this.onFocus}

/>

All other, pre-existing items render, as you can see, but the new one shows, but is blank.

the "customValue" variable is definitely populated too.

I have also tried adding directly to the ComboBox control's data source (this.state.options) via a this.setState call, which will trigger a re-render, but in this case NONE of the Options are rendered (though they're actually "there", they just display blank, like the first item in the screenshot)

When I inspect the markup, I see the following:

Where the first <li> doesnt have any child nodes ad the 2nd one does (which I expanded).

Instead of being blank, I am expecting the first <li> to look something like the last <li>, which I have also expanded.

I am also using a custom "itemTemplate" for the "custom" items I am adding to the list (anything barring phase-1 to phase-5). You can see this working correctly for the last <li> element.

Here is the code for the itemTemplate:

private editableItemTemplate(data: any): JSX.Element {

        //console.log("editableItemTemplate: " + JSON.stringify(data));

        const template = (

            <span className="vx-picklist-option">

                <span className="name">{data.text}</span>

                <span className="vx-picklist-option-actions">

                {data.isCustom && data.isCustom === true &&

                <>

                    <Button style="primary" classNames="pick-list-action-btn" shape="circle-outline" icon="pencil" size="small" onClick={this.onEditCustomValueClick} toolType={this.controller.usage} />

                    <Button style="primary" classNames="pick-list-action-btn" shape="circle-outline" icon="delete-outline" size="small" onClick={this.onDeleteCustomValueClick} toolType={this.controller.usage} />

                </>

                }

                </span>

            </span>

        );

        //console.log("template: ", template);

        return template;

    }

Ideally I would just trigger the whole this.state.options array to be re-created, rather than directly adding the option to the control as this allows me more flexibility with other, unrelated things im working on in this wrapper component for the syncfusion ComboBox component.

Any ideas of what I am doing wrong/missing?

[Mike Sowerbutts]

ok. I fixed this. It was simply a case of adding in a:

this.control?.refresh();

[Sureshkumar P]

Mike,

Thanks for your update.

Regards,

Sureshkumar P