microsoft · joschect · Apr 25, 2018 · Mar 15, 2018 · Mar 20, 2018 · Mar 21, 2018
@@ -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": "[email protected]"
+}
@@ -27,7 +27,7 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
 
   constructor(props: IAutofillProps) {
     super(props);
-    this._value = '';
+    this._value = props.defaultVisibleValue || '';
     this.state = {
       displayValue: props.defaultVisibleValue || ''
     };

@@ -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

@@ -445,11 +445,14 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
   }
 
   protected onInputBlur = (ev: React.FocusEvent<HTMLInputElement | Autofill>): 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<HTMLInputElement>);
+    }
+    // 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<HTMLInputElement>);
+      if (this.props.onBlur) {
+        this.props.onBlur(ev as React.FocusEvent<HTMLInputElement>);
       }
     }
   }

@@ -112,7 +112,7 @@ export interface IBasePickerProps<T> extends React.Props<any> {
   /**
    * Function that specifies how arbitrary text entered into the well is handled.
    */
-  createGenericItem?: (input: string, ValidationState: ValidationState) => ISuggestionModel<T>;
+  createGenericItem?: (input: string, ValidationState: ValidationState) => ISuggestionModel<T> | T;
   /**
    * Aria label for the "X" button in the selected item component.
    * @default ''
@@ -219,4 +219,11 @@ export interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement>
    * Screen reader label to apply to an input element.
    */
   'aria-label'?: string;
-}
+  /**
+   * 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;
+
+}
@@ -83,7 +83,7 @@ export class SuggestionsController<T> {
     this.suggestions.splice(index, 1);
   }
 
-  public createGenericSuggestion(itemToConvert: ISuggestionModel<T>): void {
+  public createGenericSuggestion(itemToConvert: ISuggestionModel<T> | T) {
     const itemToAdd = this.convertSuggestionsToSuggestionItems([itemToConvert])[0];
     this.currentSuggestion = itemToAdd;
   }