Issue using onRenderOption for fluent dropdown custom rendering - Doesn't update text correctly

Question

I have a component derived from the fluent ui Dropdown, called DropdownWithFilter. It sorts Dropdown options using a DebounceSearchBox. I have DropdownWithFilter working perfectly, but my last step is to change the default text to include the name of the item, plus a description on the right side of the dropdown. Right now it only displays the option.text (item name), which is the default behavior.

My component:

<DropdownWithFilter
    options={this.dropdownOptions}
    onRenderOption={onRenderOption}
/>

I am using onRenderOption as basically copy and pasted from the documentation, but it's not updating my component at all.

private onRenderOption = (option: IDropdownOption): JSX.Element => {
    const text: string = option.text + " " + option.data;
        return (
            <div>
              <span>{text}</span>
            </div>
        );
}

Initially I thought the issue might have been with me converting my dropdownItemList[] to an IDropdownOption[] array so I could set the data to be my item description

const dropdownOptions: IDropdownOption[] = [
    ...this.dropdownItemList.map(item => ({
        key: item.description,
        text: item.text,
        data: item.description,
    })),
];

However, since even trying to overwrite my item text with a single string, like 'foo' wasn't having any effect, I know there is some other issue. Possibly with my custom component, DropdownWithFilter itself?

private onRenderOption = (option: IDropdownOption): JSX.Element => {
        return (
            <div>
              <span>foo</span>
            </div>
        );
}

I've been stumped on this for two straight days. Any help on what I'm doing wrong would be greatly appreciated. Let me know if there is any more code I can provide to clarify what I'm working on.

From the pre-populated suggestions on similar problems, I do see this: Fluent UI 2 columns inside text element of dropdown option. However I'm not able to edit the Dropdown directly, since I'm working with a derived component and other code also uses DropdownWithFilter.

Arms · Accepted Answer · 2024-11-01 16:25:09Z

0

Wow, okay, posting this helped me assess where my problems could be. I ended up investigating my root component a bit more, DropdownWithFilter, and it turns out it already has an onRenderOption that's overriding anything I try to do in my implementations of it. To fix this, I'm creating a copy component of DropdownWithFilter, called DropdownWithFilterColumns, with the exact same logic as DropdownWithFilter except that it returns text exactly the way I want it. Thanks for letting me think out loud!

edited Nov 1, 2024 at 16:25

answered Nov 1, 2024 at 16:24

Arms

12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Issue using onRenderOption for fluent dropdown custom rendering - Doesn't update text correctly

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related