diff --git a/common/changes/office-ui-fabric-react/focusTagItemOnDisabledPicker_2018-05-10-06-48.json b/common/changes/office-ui-fabric-react/focusTagItemOnDisabledPicker_2018-05-10-06-48.json new file mode 100644 index 00000000000000..573b3e49d5d09e --- /dev/null +++ b/common/changes/office-ui-fabric-react/focusTagItemOnDisabledPicker_2018-05-10-06-48.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Added an addtional prop in IPickerItemProps for allowing focus on tagItem when picker is disabled", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "veloiya@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagItem.tsx b/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagItem.tsx index ef1173ad814c5d..25bef38f4381e5 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagItem.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagItem.tsx @@ -8,7 +8,11 @@ import { ITag } from './TagPicker'; import * as stylesImport from './TagItem.scss'; const styles: any = stylesImport; -export const TagItem = (props: IPickerItemProps) => ( +export interface ITagItemProps extends IPickerItemProps { + enableTagFocusInDisabledPicker?: boolean; +} + +export const TagItem = (props: ITagItemProps) => (
) => ( role={ 'listitem' } key={ props.index } data-selection-index={ props.index } - data-is-focusable={ !props.disabled && true } + data-is-focusable={ (props.enableTagFocusInDisabledPicker || !props.disabled) && true } > { props.children } { !props.disabled && diff --git a/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagPicker.tsx b/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagPicker.tsx index 8edd8e8c2641dd..f5993c3a1f83dc 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagPicker.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagPicker.tsx @@ -6,8 +6,7 @@ import { /* tslint:enable */ import { BasePicker } from '../BasePicker'; import { IBasePickerProps } from '../BasePicker.types'; -import { TagItem } from './TagItem'; -import { IPickerItemProps } from '../PickerItem.types'; +import { TagItem, ITagItemProps } from './TagItem'; import * as stylesImport from './TagItem.scss'; const styles: any = stylesImport; @@ -21,7 +20,7 @@ export interface ITagPickerProps extends IBasePickerProps { export class TagPicker extends BasePicker { protected static defaultProps = { - onRenderItem: (props: IPickerItemProps) => { return { props.item.name }; }, + onRenderItem: (props: ITagItemProps) => { return { props.item.name }; }, onRenderSuggestionsItem: (props: ITag) =>
{ props.name }
}; }