Fluentui: How can I interact with SearchBox on CommandBar

Created on 16 May 2017  ·  16Comments  ·  Source: microsoft/fluentui

I see in documentation have isSearchBoxVisible and searchPlaceholderText property to display it on CommandBar, but I don't know any way to get its value or interact with it.
Help me, Thanks!

Question ❔

All 16 comments

Right now the searchbox in the command bar is pretty useless. I'm working on a PR right now to revamp the entire command bar, including integrating the SearchBox component and passing searchBoxProps to it. This will let you do anything with the CommandBar SearchBox that you can do with the search box component.

Add an event listener to the search box element.

@micahgodbolt any idea when this fix will be released?
Cheers

Noticed this as well - very useless without having an onchanged event for the searchbox. Right now I'm adding my own search box to the commandbar instead.

I worked around it by wrapping the component then doing an componentWillMount that attaches a native event onchange handler

@micahgodbolt any eta on this or do you want some help with something?

Sorry about the crazy long delay. @vertonghenb, I just just opened a PR to move the new command bar into Fabric. If you are able to take a look at it, try it out, give a thumbs up, it'll make the PR go faster.

You can either pull down my branch and try it there, or you can add @uifabric/experiments as a dependency and import the commandBar from there, to try it in your product.

@micahgodbolt Thanks for the update, can't seem to find the PR though?

@vertonghenb it was already merged into our 6.0 branch. we should be pushing out beta releases soon

@micahgodbolt when v6.0 will be a stable release? Thanks

@jonathanhotono v6 has been pulled, the latest is now v5.7. So not sure what will happen with this particular feature.

This issue has been automatically marked as stale because it has not activity for 30 days. It will be closed if no further activity occurs within 14 days of this comment. Thank you for your contributions to Fabric React!
Why am I receiving this notification?

I could really use this. I hope it stays in 6.0 at least.

It's quite easy to add the search box component manually as well.

You can use an item's onRender to add any component you want. Might require a little styling to make it fit properly, but that's pretty straight forward as well.

https://codepen.io/micahgodbolt/pen/zaGwee?editors=1010

Closing this issue as we now have a straightforward way to add a fully functional searchbox to the current release of Fabric.

Was this page helpful?
0 / 5 - 0 ratings