0

What I would like to do is... - Change the callout that appears when the user tries to type something. I want to add a custom component with a Search Box and also the ability for the user to choose the category. - Change the look of rendered text. Just like People Picker but with icon and text. - Ability to trigger the callout to appear when an external button is clicked. Maybe I can fire focus event on Picker when Button is clicked. Just thinking out loud.

I tried implementing it but there's not much documentation on it. Any example related to it would be appreciated.

Thanks!

Ashit Vora
  • 2,902
  • 2
  • 27
  • 39

1 Answers1

1

Change the callout that appears when the user tries to type something. I want to add a custom component with a Search Box and also the ability for the user to choose the category.

The pickers are mainly intended to show options that correspond directly to the input, and usually are constrained by the input. It should be possible to build what you're describing, though I expect building it from scratch would be easier than repurposing a picker.

Change the look of rendered text. Just like People Picker but with icon and text.

Starting from the Picker example, changing the look of suggestions can be done by overriding onRenderSuggestionsItem, such as in the following:

<TagPicker
          onResolveSuggestions={this._onFilterChanged}
          onRenderSuggestionsItem={(p) => <TagItemSuggestion>
                                           <FontIcon iconName="Dictionary"/> key: {p.key}, name: {p.name}
                                          </TagItemSuggestion>}
        />

Ability to trigger the callout to appear when an external button is clicked. Maybe I can fire focus event on Picker when Button is clicked

I would recommend using a ref to access the imperative interface, then call focus() when the button is clicked. I don't believe there's an API to actually show the suggestion pane, but that will at least put users in the right context.

JD Huntington
  • 348
  • 1
  • 5