diff --git a/common/changes/office-ui-fabric-react/minorpicker-fixes_2018-04-16-18-52.json b/common/changes/office-ui-fabric-react/minorpicker-fixes_2018-04-16-18-52.json new file mode 100644 index 00000000000000..6de2d06c45968f --- /dev/null +++ b/common/changes/office-ui-fabric-react/minorpicker-fixes_2018-04-16-18-52.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Pickers: Several fixes regarding certain props", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "joschect@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx index dde35432ad8e6a..d79dbe446c12f8 100644 --- a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx +++ b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx @@ -27,7 +27,7 @@ export class Autofill extends BaseComponent impl constructor(props: IAutofillProps) { super(props); - this._value = ''; + this._value = props.defaultVisibleValue || ''; this.state = { displayValue: props.defaultVisibleValue || '' }; diff --git a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.types.ts b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.types.ts index 2d971d8d4f9433..aa48c349e09f44 100644 --- a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.types.ts +++ b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.types.ts @@ -67,13 +67,16 @@ export interface IAutofillProps extends enableAutofillOnKeyPress?: KeyCodes[]; /** - * the default value to be visible + * The default value to be visible. This is different from placeholder + * because it actually sets the current value of the picker + * Note: This will only be set upon component creation + * and will not update with subsequent prop updates. */ defaultVisibleValue?: string; /** * Handler for checking and updating the value if needed - * in componentWillReceiveProps + * in componentWillReceiveProps * * @param {IAutofillProps} defaultVisibleValue - the defaultVisibleValue that got passed * in to the auto fill's componentWillReceiveProps diff --git a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx index 21594bc9020f6c..120de802b6286d 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx @@ -445,11 +445,14 @@ export class BasePicker> extends BaseComponent< } protected onInputBlur = (ev: React.FocusEvent): void => { - // Only blur if an unrelated element gets focus. Otherwise treat it as though it still has focus. - if (!elementContains(this.root.current!, ev.relatedTarget as HTMLElement)) { + if (this.props.inputProps && this.props.inputProps.onBlur) { + this.props.inputProps.onBlur(ev as React.FocusEvent); + } + // Only blur the entire component if an unrelated element gets focus. Otherwise treat it as though it still has focus. + if (!elementContains(this.root.value!, ev.relatedTarget as HTMLElement)) { this.setState({ isFocused: false }); - if (this.props.inputProps && this.props.inputProps.onBlur) { - this.props.inputProps.onBlur(ev as React.FocusEvent); + if (this.props.onBlur) { + this.props.onBlur(ev as React.FocusEvent); } } } diff --git a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.types.ts b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.types.ts index 5c5d3439a901a8..bd30168ae581cd 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.types.ts +++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.types.ts @@ -112,7 +112,7 @@ export interface IBasePickerProps extends React.Props { /** * Function that specifies how arbitrary text entered into the well is handled. */ - createGenericItem?: (input: string, ValidationState: ValidationState) => ISuggestionModel; + createGenericItem?: (input: string, ValidationState: ValidationState) => ISuggestionModel | T; /** * Aria label for the "X" button in the selected item component. * @default '' @@ -219,4 +219,11 @@ export interface IInputProps extends React.InputHTMLAttributes * Screen reader label to apply to an input element. */ 'aria-label'?: string; -} \ No newline at end of file + /** + * The default value to be visible when the autofill first created. + * This is different than placeholder text because the placeholder text will disappear and re-appear. This + * text persists until deleted or changed. + */ + defaultVisibleValue?: string; + +} diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/SuggestionsController.ts b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/SuggestionsController.ts index 3dfbf16f5e3323..860be11fcf86f9 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/SuggestionsController.ts +++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/SuggestionsController.ts @@ -83,7 +83,7 @@ export class SuggestionsController { this.suggestions.splice(index, 1); } - public createGenericSuggestion(itemToConvert: ISuggestionModel): void { + public createGenericSuggestion(itemToConvert: ISuggestionModel | T) { const itemToAdd = this.convertSuggestionsToSuggestionItems([itemToConvert])[0]; this.currentSuggestion = itemToAdd; }