Make suggestions an object

public/app/containers/Explore/QueryField.tsx

@@ -545,7 +545,9 @@ class QueryField extends React.Component<any, any> {
     let selectedIndex = Math.max(this.state.typeaheadIndex, 0);
     let selectedIndex = Math.max(this.state.typeaheadIndex, 0);
     const flattenedSuggestions = flattenSuggestions(suggestions);
     const flattenedSuggestions = flattenSuggestions(suggestions);
     selectedIndex = selectedIndex % flattenedSuggestions.length || 0;
     selectedIndex = selectedIndex % flattenedSuggestions.length || 0;
-    const selectedKeys = flattenedSuggestions.length > 0 ? [flattenedSuggestions[selectedIndex]] : [];
+    const selectedKeys = (flattenedSuggestions.length > 0 ? [flattenedSuggestions[selectedIndex]] : []).map(
+      i => (typeof i === 'object' ? i.text : i)
+    );
 
 
     // Create typeahead in DOM root so we can later position it absolutely
     // Create typeahead in DOM root so we can later position it absolutely
     return (
     return (

public/app/containers/Explore/Typeahead.tsx

@@ -41,9 +41,17 @@ class TypeaheadGroup extends React.PureComponent<any, any> {
       <li className="typeahead-group">
       <li className="typeahead-group">
         <div className="typeahead-group__title">{label}</div>
         <div className="typeahead-group__title">{label}</div>
         <ul className="typeahead-group__list">
         <ul className="typeahead-group__list">
-          {items.map(item => (
-            <TypeaheadItem key={item} onClickItem={onClickItem} isSelected={selected.indexOf(item) > -1} label={item} />
-          ))}
+          {items.map(item => {
+            const text = typeof item === 'object' ? item.text : item;
+            return (
+              <TypeaheadItem
+                key={text}
+                onClickItem={onClickItem}
+                isSelected={selected.indexOf(text) > -1}
+                label={text}
+              />
+            );
+          })}
         </ul>
         </ul>
       </li>
       </li>
     );
     );