Pickers: Fix suggestions not having proper value selected

apps/vr-tests/src/stories/PeoplePicker.stories.tsx

@@ -47,6 +47,56 @@ const people: (IPersonaProps & { key: string | number })[] = [
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
     presence: PersonaPresence.offline
+  },
+  {
+    key: 5,
+    imageUrl: TestImages.personaMale,
+    imageInitials: 'RK',
+    primaryText: 'Alex Lundberg1',
+    secondaryText: 'Financial Analyst',
+    tertiaryText: 'In a meeting',
+    optionalText: 'Available at 4:00pm',
+    presence: PersonaPresence.offline
+  },
+  {
+    key: 6,
+    imageUrl: TestImages.personaMale,
+    imageInitials: 'RK',
+    primaryText: 'Alex Lundberg2',
+    secondaryText: 'Financial Analyst',
+    tertiaryText: 'In a meeting',
+    optionalText: 'Available at 4:00pm',
+    presence: PersonaPresence.offline
+  },
+  {
+    key: 7,
+    imageUrl: TestImages.personaMale,
+    imageInitials: 'RK',
+    primaryText: 'Alex Lundberg2',
+    secondaryText: 'Financial Analyst',
+    tertiaryText: 'In a meeting',
+    optionalText: 'Available at 4:00pm',
+    presence: PersonaPresence.offline
+  },
+  {
+    key: 8,
+    imageUrl: TestImages.personaMale,
+    imageInitials: 'RK',
+    primaryText: 'Alex Lundberg3',
+    secondaryText: 'Financial Analyst',
+    tertiaryText: 'In a meeting',
+    optionalText: 'Available at 4:00pm',
+    presence: PersonaPresence.offline
+  },
+  {
+    key: 9,
+    imageUrl: TestImages.personaMale,
+    imageInitials: 'RK',
+    primaryText: 'Alex Lundberg4',
+    secondaryText: 'Financial Analyst',
+    tertiaryText: 'In a meeting',
+    optionalText: 'Available at 4:00pm',
+    presence: PersonaPresence.offline
   }
 ];
 
@@ -96,7 +146,22 @@ storiesOf('PeoplePicker', module)
       pickerSuggestionsProps={ suggestionProps }
       disabled
     />
-  ))
+  )).add('Normal with text', () => (
+    <Screener
+      steps={ new Screener.Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .click('.ms-BasePicker-input')
+        .setValue('.ms-BasePicker-input', 'a')
+        .snapshot('suggestiona')
+        .end() }>
+      <NormalPeoplePicker
+        onResolveSuggestions={ getPeople }
+        onEmptyInputFocus={ getPeople }
+        getTextFromItem={ getTextFromItem }
+        className={ 'ms-PeoplePicker' }
+        pickerSuggestionsProps={ suggestionProps }
+      />
+    </Screener>))
   .addDecorator(story => (
     <Screener
       steps={ new Screener.Steps()

common/changes/office-ui-fabric-react/joschect-fix-pickers-suggestions_2018-03-29-23-30.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Pickers: fix bug where suggestions wouldn't have correct value selected",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.test.tsx

@@ -0,0 +1,91 @@
+
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import * as ReactTestUtils from 'react-dom/test-utils';
+/* tslint:enable:no-unused-variable */
+import * as renderer from 'react-test-renderer';
+
+import { Suggestions } from './Suggestions';
+import { ISuggestionItemProps } from './Suggestions.types';
+import { ISuggestionModel } from './SuggestionsController';
+
+const suggestions = [
+  'black',
+  'blue',
+  'brown',
+  'cyan',
+  'green',
+  'magenta',
+  'mauve',
+  'orange',
+  'pink',
+  'purple',
+  'red',
+  'rose',
+  'violet',
+  'white',
+  'yellow'];
+
+function generateSimpleSuggestions(selectedIndex: number = 0) {
+  return suggestions.map<ISuggestionModel<ISimple>>((value, index) => {
+    return {
+      item: {
+        key: value,
+        name: value
+      },
+      selected: index === 0
+    };
+  });
+
+}
+
+const basicSuggestionRenderer = (props: ISimple) => {
+  return <div> { props.name } </div>;
+};
+
+export interface ISimple {
+  key: string;
+  name: string;
+}
+
+function mockOnClick() {
+  console.log('clicked');
+}
+
+describe('Suggestions', () => {
+
+  it('renders a list properly', () => {
+
+    const component = renderer.create(
+      <Suggestions
+        onRenderSuggestion={ basicSuggestionRenderer }
+        onSuggestionClick={ mockOnClick }
+        suggestions={ generateSimpleSuggestions() }
+      />
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('scrolls to selected index properly', () => {
+    const component = renderer.create(
+      <Suggestions
+        onRenderSuggestion={ basicSuggestionRenderer }
+        onSuggestionClick={ mockOnClick }
+        suggestions={ generateSimpleSuggestions() }
+      />
+    );
+
+    component.update(
+      <Suggestions
+        onRenderSuggestion={ basicSuggestionRenderer }
+        onSuggestionClick={ mockOnClick }
+        suggestions={ generateSimpleSuggestions(8) }
+      />
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+});

packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx

@@ -332,7 +332,7 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, ISuggest
       >
         { suggestions.map((suggestion, index) =>
           <div
-            ref={ this._selectedElement }
+            ref={ suggestion.selected ? this._selectedElement : '' }
             // tslint:disable-next-line:no-string-literal
             key={ (suggestion.item as any)['key'] ? (suggestion.item as any)['key'] : index }
             id={ 'sug-' + index }