diff --git a/src/components/CommandBar/CommandBar.Props.ts b/src/components/CommandBar/CommandBar.Props.ts index 5cf81c28757e73..33b04d32f82bf7 100644 --- a/src/components/CommandBar/CommandBar.Props.ts +++ b/src/components/CommandBar/CommandBar.Props.ts @@ -1,6 +1,13 @@ import * as React from 'react'; import { IContextualMenuItem } from '../ContextualMenu/index'; +export interface ICommandBar { + /** + * Sets focus to the active command in the list. + */ + focus(): void; +} + export interface ICommandBarProps extends React.HTMLProps { /** * Whether or not the search box is visible diff --git a/src/components/CommandBar/CommandBar.tsx b/src/components/CommandBar/CommandBar.tsx index f22985e1460a24..2cb556f9ce265f 100644 --- a/src/components/CommandBar/CommandBar.tsx +++ b/src/components/CommandBar/CommandBar.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ICommandBarProps } from './CommandBar.Props'; +import { ICommandBar, ICommandBarProps } from './CommandBar.Props'; import { FocusZone, FocusZoneDirection } from '../../FocusZone'; import { ContextualMenu, IContextualMenuItem } from '../../ContextualMenu'; import { EventGroup } from '../../utilities/eventGroup/EventGroup'; @@ -21,7 +21,7 @@ export interface ICommandBarState { renderedFarItems?: IContextualMenuItem[]; } -export class CommandBar extends React.Component { +export class CommandBar extends React.Component implements ICommandBar { public static defaultProps = { items: [], overflowItems: [], @@ -34,6 +34,7 @@ export class CommandBar extends React.Component { searchBox } - +
{ renderedItems.map((item, index) => ( this._renderItemInCommandBar(item, index, expandedMenuItemKey) @@ -139,6 +140,10 @@ export class CommandBar extends React.Component