How to get search box in `CommandBar` after update to Fabric 6

Question

I've updated Fabric to version 6.6.1 and noticed that property isSearchBoxVisible is missing in CommandBar component.

How to substitute it? I widely use it in my app.

Answer 1

You can use the onRender property of IContextualMenuItem as far as I know. I use it to show a custom control in my CommandBar:

const items: IContextualMenuItem[] = [];

items.push({
    key: "ArchivedToggle",
    name: "Archived Toggle",
    onRender: this.renderArchivedToggle.bind(this),
});

In the render function:

<CommandBar
    className={styles.actionBar}
    items={[]}
    farItems={items}
/>

In the custom render function, you can basicly create whatever you want. In this case it's a Toggle, but you can replace this by a SearchBox as well ofcourse.

private renderArchivedToggle() {
    <Toggle
        defaultChecked={props.defaultChecked}
        label=""
        onText={(_spPageContextInfo.currentLanguage === Language.DUTCH) ? "Archief" : "Archive"}
        offText={(_spPageContextInfo.currentLanguage === Language.DUTCH) ? "Archief" : "Archive"}
        onChanged={(value: boolean) => props.updateValueHandler(value)}
    />
}

Result: