CODEWITHSUNDEEP
dropdownreact-typescript
Pomix132
Pomix132

Reputation: 13

Problem with onRenderOption error in fluentUI dropdown

const SearchableDropdownComponent: React.FunctionComponent = (props) => { const [searchText, setSearchText] = useState('');

    function renderOption(option: IDropdownOption): JSX.Element {
      return (option.itemType === DropdownMenuItemType.Header && option.key === "FilterHeader") ?
        <SearchBox onChange={(ev, newValue: any) => setSearchText(newValue)} underlined={true} placeholder="Search options" />: <>{option.text}</>;
    }
  
    return (
      <Dropdown
        {...props}
        options={[
          { key: 'FilterHeader', text: '-', itemType: DropdownMenuItemType.Header },
          { key: 'divider_filterHeader', text: '-', itemType: DropdownMenuItemType.Divider },
          ...props.options.map((option)  => !option.disabled && option.text.toLowerCase().indexOf(searchText.toLowerCase()) > -1 ?
            option : { ...option, hidden: true }
          ),
        ]}
        calloutProps={{ shouldRestoreFocus: false, setInitialFocus: false }} //not working
        onRenderOption={renderOption}
        onDismiss={() => setSearchText('')}
      />
    );
  
  };

Upvotes: 0

Views: 863

Answers (1)

xi chen
xi chen

Reputation: 21

I got the same error, and I fixed it by making the parameter 'option' optional.

function renderOption(option?: IDropdownOption ): JSX.Element {
  return option!.itemType === DropdownMenuItemType.Header &&
    option!.key === "FilterHeader" ? (
    <SearchBox
      onChange={(ev, newValue) => setSearchText(newValue ?? "")}
      underlined={true}
      placeholder="Search options"
    />
  ) : (
    <>{option!.text}</>
  );

}

Upvotes: 2

Related Questions