0

I'm looking at the options for customise fluent UI dropdown, based on the doc there are 4 options: https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown

    <Dropdown
      placeholder="Select an option"
      label="Custom example"
      ariaLabel="Custom dropdown example"
      onRenderPlaceholder={onRenderPlaceholder}
      onRenderTitle={onRenderTitle}
      onRenderOption={onRenderOption}
      onRenderCaretDown={onRenderCaretDown}
      styles={dropdownStyles}
      options={exampleOptions}
    />
  1. onRenderPlaceholder
  2. onRenderTitle
  3. onRenderOption
  4. onRenderCaretDown

But these options are not really close to my requirements, I want to customise the group header and dropdown panel with extra buttons.

Based on the defnition in the code (IDropdownProps) there are also some exposed custom rendering are not in the docs, just curiouse is there any sample use case for following custom renderings.

  1. onRenderItem
  2. onRenderList
  3. onRenderContainer
Shawn
  • 184
  • 2
  • 14
  • Hi, unfortunately there is no way to implement your requirements with the current `Dropdown` API. What you can use as alternative way is `Picker` component or `ComboBox`. https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers https://developer.microsoft.com/en-us/fluentui#/controls/web/combobox – Marko Savic May 12 '21 at 14:03
  • 2
    I ended up using Callout with custom component. Ideally it would be good if we can have more flexibility on custom render e.g. https://material-ui.com/components/selects/#multiple-select – Shawn May 14 '21 at 06:19

0 Answers0