diff --git a/ui/src/tempVars/components/CSVTemplateBuilder.tsx b/ui/src/tempVars/components/CSVTemplateBuilder.tsx
index 765fd7593..23d540a7b 100644
--- a/ui/src/tempVars/components/CSVTemplateBuilder.tsx
+++ b/ui/src/tempVars/components/CSVTemplateBuilder.tsx
@@ -6,7 +6,6 @@ import TemplatePreviewList from 'src/tempVars/components/TemplatePreviewList'
 import {TemplateBuilderProps, TemplateValueType} from 'src/types'
 
 interface State {
-  templateValues: string[]
   templateValuesString: string
 }
 
@@ -18,14 +17,14 @@ class CSVTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
     const templateValues = props.template.values.map(v => v.value)
 
     this.state = {
-      templateValues,
       templateValuesString: templateValues.join(', '),
     }
   }
 
   public render() {
-    const {templateValues, templateValuesString} = this.state
-    const pluralizer = templateValues.length === 1 ? '' : 's'
+    const {onChooseValue, template} = this.props
+    const {templateValuesString} = this.state
+    const pluralizer = template.values.length === 1 ? '' : 's'
 
     return (
       <div className="temp-builder csv-temp-builder">
@@ -42,14 +41,14 @@ class CSVTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
         </div>
         <div className="temp-builder-results">
           <p>
-            CSV contains <strong>{templateValues.length}</strong> value{
+            CSV contains <strong>{template.values.length}</strong> value{
               pluralizer
             }
           </p>
-          {templateValues.length > 0 && (
+          {template.values.length > 0 && (
             <TemplatePreviewList
-              items={templateValues}
-              onChoose={this.handleChooseCSVValue}
+              items={template.values}
+              onChoose={onChooseValue}
             />
           )}
         </div>
@@ -73,8 +72,6 @@ class CSVTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
       templateValues = templateValuesString.split(',').map(s => s.trim())
     }
 
-    this.setState({templateValues})
-
     const nextValues = templateValues.map(value => {
       return {
         type: TemplateValueType.CSV,
@@ -89,21 +86,6 @@ class CSVTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
 
     onUpdateTemplate({...template, values: nextValues})
   }
-
-  private handleChooseCSVValue = (csvValue: string) => {
-    const {template, onUpdateTemplate} = this.props
-    const {templateValues} = this.state
-
-    const nextValues = templateValues.map(value => {
-      return {
-        type: TemplateValueType.CSV,
-        value,
-        selected: value === csvValue,
-      }
-    })
-
-    onUpdateTemplate({...template, values: nextValues})
-  }
 }
 
 export default CSVTemplateBuilder
diff --git a/ui/src/tempVars/components/DatabasesTemplateBuilder.tsx b/ui/src/tempVars/components/DatabasesTemplateBuilder.tsx
index aa1f30ee2..e3f9c3317 100644
--- a/ui/src/tempVars/components/DatabasesTemplateBuilder.tsx
+++ b/ui/src/tempVars/components/DatabasesTemplateBuilder.tsx
@@ -12,7 +12,6 @@ import {
 } from 'src/types'
 
 interface State {
-  databases: string[]
   databasesStatus: RemoteDataState
 }
 
@@ -25,7 +24,6 @@ class DatabasesTemplateBuilder extends PureComponent<
     super(props)
 
     this.state = {
-      databases: [],
       databasesStatus: RemoteDataState.Loading,
     }
   }
@@ -35,7 +33,8 @@ class DatabasesTemplateBuilder extends PureComponent<
   }
 
   public render() {
-    const {databases, databasesStatus} = this.state
+    const {template, onChooseValue} = this.props
+    const {databasesStatus} = this.state
 
     return (
       <div className="temp-builder databases-temp-builder">
@@ -46,9 +45,9 @@ class DatabasesTemplateBuilder extends PureComponent<
           </div>
         </div>
         <TemplateMetaQueryPreview
-          items={databases}
+          items={template.values}
           loadingStatus={databasesStatus}
-          onChoose={this.handleChooseDatabaseValue}
+          onChoose={onChooseValue}
         />
       </div>
     )
@@ -63,10 +62,7 @@ class DatabasesTemplateBuilder extends PureComponent<
       const {data} = await showDatabases(source.links.proxy)
       const {databases} = parseShowDatabases(data)
 
-      this.setState({
-        databases,
-        databasesStatus: RemoteDataState.Done,
-      })
+      this.setState({databasesStatus: RemoteDataState.Done})
 
       const nextValues = databases.map(db => {
         return {
@@ -90,21 +86,6 @@ class DatabasesTemplateBuilder extends PureComponent<
       this.setState({databasesStatus: RemoteDataState.Error})
     }
   }
-
-  private handleChooseDatabaseValue = (dbValue: string) => {
-    const {template, onUpdateTemplate} = this.props
-    const {databases} = this.state
-
-    const nextValues = databases.map(value => {
-      return {
-        type: TemplateValueType.Database,
-        value,
-        selected: value === dbValue,
-      }
-    })
-
-    onUpdateTemplate({...template, values: nextValues})
-  }
 }
 
 export default DatabasesTemplateBuilder
diff --git a/ui/src/tempVars/components/FieldKeysTemplateBuilder.tsx b/ui/src/tempVars/components/FieldKeysTemplateBuilder.tsx
index b669cfb76..3ce0adfb0 100644
--- a/ui/src/tempVars/components/FieldKeysTemplateBuilder.tsx
+++ b/ui/src/tempVars/components/FieldKeysTemplateBuilder.tsx
@@ -21,7 +21,7 @@ const fetchKeys = async (source, db, measurement): Promise<string[]> => {
 
 class FieldKeysTemplateBuilder extends PureComponent<TemplateBuilderProps> {
   public render() {
-    const {template, source, onUpdateTemplate} = this.props
+    const {template, source, onUpdateTemplate, onChooseValue} = this.props
 
     return (
       <KeysTemplateBuilder
@@ -31,6 +31,7 @@ class FieldKeysTemplateBuilder extends PureComponent<TemplateBuilderProps> {
         template={template}
         source={source}
         onUpdateTemplate={onUpdateTemplate}
+        onChooseValue={onChooseValue}
       />
     )
   }
diff --git a/ui/src/tempVars/components/KeysTemplateBuilder.tsx b/ui/src/tempVars/components/KeysTemplateBuilder.tsx
index 9af10cb5b..dd0fb9b38 100644
--- a/ui/src/tempVars/components/KeysTemplateBuilder.tsx
+++ b/ui/src/tempVars/components/KeysTemplateBuilder.tsx
@@ -33,7 +33,6 @@ interface State {
   measurements: string[]
   measurementsStatus: RemoteDataState
   selectedMeasurement: string
-  keys: string[]
   keysStatus: RemoteDataState
 }
 
@@ -52,7 +51,6 @@ class KeysTemplateBuilder extends PureComponent<Props, State> {
       measurements: [],
       measurementsStatus: RemoteDataState.Loading,
       selectedMeasurement,
-      keys: [],
       keysStatus: RemoteDataState.Loading,
     }
   }
@@ -64,7 +62,7 @@ class KeysTemplateBuilder extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {queryPrefix} = this.props
+    const {queryPrefix, template, onChooseValue} = this.props
     const {
       databases,
       databasesStatus,
@@ -72,7 +70,6 @@ class KeysTemplateBuilder extends PureComponent<Props, State> {
       measurements,
       measurementsStatus,
       selectedMeasurement,
-      keys,
       keysStatus,
     } = this.state
 
@@ -102,9 +99,9 @@ class KeysTemplateBuilder extends PureComponent<Props, State> {
           </div>
         </div>
         <TemplateMetaQueryPreview
-          items={keys}
+          items={template.values}
           loadingStatus={keysStatus}
-          onChoose={this.handleChooseKeyValue}
+          onChoose={onChooseValue}
         />
       </div>
     )
@@ -182,10 +179,7 @@ class KeysTemplateBuilder extends PureComponent<Props, State> {
         selectedMeasurement
       )
 
-      this.setState({
-        keys,
-        keysStatus: RemoteDataState.Done,
-      })
+      this.setState({keysStatus: RemoteDataState.Done})
 
       const nextValues = keys.map(value => {
         return {
@@ -206,21 +200,6 @@ class KeysTemplateBuilder extends PureComponent<Props, State> {
     }
   }
 
-  private handleChooseKeyValue = (keyValue: string) => {
-    const {template, onUpdateTemplate, templateValueType} = this.props
-    const {keys} = this.state
-
-    const nextValues = keys.map(value => {
-      return {
-        type: templateValueType,
-        value,
-        selected: value === keyValue,
-      }
-    })
-
-    onUpdateTemplate({...template, values: nextValues})
-  }
-
   private handleChooseDatabaseDropdown = ({text}) => {
     this.handleChooseDatabase(text)
   }
diff --git a/ui/src/tempVars/components/MeasurementsTemplateBuilder.tsx b/ui/src/tempVars/components/MeasurementsTemplateBuilder.tsx
index b2c19e912..b40c08b7b 100644
--- a/ui/src/tempVars/components/MeasurementsTemplateBuilder.tsx
+++ b/ui/src/tempVars/components/MeasurementsTemplateBuilder.tsx
@@ -19,7 +19,6 @@ interface State {
   databases: string[]
   databasesStatus: RemoteDataState
   selectedDatabase: string
-  measurements: string[]
   measurementsStatus: RemoteDataState
 }
 
@@ -37,7 +36,6 @@ class MeasurementsTemplateBuilder extends PureComponent<
       databases: [],
       databasesStatus: RemoteDataState.Loading,
       selectedDatabase,
-      measurements: [],
       measurementsStatus: RemoteDataState.Loading,
     }
   }
@@ -48,11 +46,11 @@ class MeasurementsTemplateBuilder extends PureComponent<
   }
 
   public render() {
+    const {template, onChooseValue} = this.props
     const {
       databases,
       databasesStatus,
       selectedDatabase,
-      measurements,
       measurementsStatus,
     } = this.state
 
@@ -73,9 +71,9 @@ class MeasurementsTemplateBuilder extends PureComponent<
           </div>
         </div>
         <TemplateMetaQueryPreview
-          items={measurements}
+          items={template.values}
           loadingStatus={measurementsStatus}
-          onChoose={this.handleChooseMeasurementValue}
+          onChoose={onChooseValue}
         />
       </div>
     )
@@ -120,10 +118,7 @@ class MeasurementsTemplateBuilder extends PureComponent<
 
       const measurements = _.get(measurementSets, '0.measurements', [])
 
-      this.setState({
-        measurements,
-        measurementsStatus: RemoteDataState.Done,
-      })
+      this.setState({measurementsStatus: RemoteDataState.Done})
 
       const nextValues = measurements.map(value => {
         return {
@@ -144,21 +139,6 @@ class MeasurementsTemplateBuilder extends PureComponent<
     }
   }
 
-  private handleChooseMeasurementValue = (measurementValue: string) => {
-    const {template, onUpdateTemplate} = this.props
-    const {measurements} = this.state
-
-    const nextValues = measurements.map(value => {
-      return {
-        type: TemplateValueType.Measurement,
-        value,
-        selected: value === measurementValue,
-      }
-    })
-
-    onUpdateTemplate({...template, values: nextValues})
-  }
-
   private handleChooseDatabaseDropdown = ({text}) => {
     this.handleChooseDatabase(text)
   }
diff --git a/ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx b/ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx
index 91eaf8a37..2dc085350 100644
--- a/ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx
+++ b/ui/src/tempVars/components/MetaQueryTemplateBuilder.tsx
@@ -18,7 +18,6 @@ const DEBOUNCE_DELAY = 750
 interface State {
   metaQueryInput: string // bound to input
   metaQuery: string // debounced view of metaQueryInput
-  metaQueryResults: string[]
   metaQueryResultsStatus: RemoteDataState
 }
 
@@ -45,7 +44,6 @@ class CustomMetaQueryTemplateBuilder extends PureComponent<
     this.state = {
       metaQuery,
       metaQueryInput: metaQuery,
-      metaQueryResults: [],
       metaQueryResultsStatus: RemoteDataState.NotStarted,
     }
   }
@@ -76,7 +74,8 @@ class CustomMetaQueryTemplateBuilder extends PureComponent<
   }
 
   private renderResults() {
-    const {metaQueryResults, metaQueryResultsStatus} = this.state
+    const {template, onChooseValue} = this.props
+    const {metaQueryResultsStatus} = this.state
 
     if (this.showInvalidMetaQueryMessage) {
       return (
@@ -88,9 +87,9 @@ class CustomMetaQueryTemplateBuilder extends PureComponent<
 
     return (
       <TemplateMetaQueryPreview
-        items={metaQueryResults}
+        items={template.values}
         loadingStatus={metaQueryResultsStatus}
-        onChoose={this.handleChooseQueryValue}
+        onChoose={onChooseValue}
       />
     )
   }
@@ -132,10 +131,7 @@ class CustomMetaQueryTemplateBuilder extends PureComponent<
 
       const metaQueryResults = parseMetaQuery(metaQuery, data)
 
-      this.setState({
-        metaQueryResults,
-        metaQueryResultsStatus: RemoteDataState.Done,
-      })
+      this.setState({metaQueryResultsStatus: RemoteDataState.Done})
 
       const nextValues = metaQueryResults.map(result => {
         return {
@@ -160,26 +156,10 @@ class CustomMetaQueryTemplateBuilder extends PureComponent<
       onUpdateTemplate(nextTemplate)
     } catch {
       this.setState({
-        metaQueryResults: [],
         metaQueryResultsStatus: RemoteDataState.Error,
       })
     }
   }
-
-  private handleChooseQueryValue = (metaQueryResultValue: string) => {
-    const {template, onUpdateTemplate} = this.props
-    const {metaQueryResults} = this.state
-
-    const nextValues = metaQueryResults.map(value => {
-      return {
-        type: TemplateValueType.MetaQuery,
-        value,
-        selected: value === metaQueryResultValue,
-      }
-    })
-
-    onUpdateTemplate({...template, values: nextValues})
-  }
 }
 
 export default CustomMetaQueryTemplateBuilder
diff --git a/ui/src/tempVars/components/TagKeysTemplateBuilder.tsx b/ui/src/tempVars/components/TagKeysTemplateBuilder.tsx
index 1247e6a69..a6911c31e 100644
--- a/ui/src/tempVars/components/TagKeysTemplateBuilder.tsx
+++ b/ui/src/tempVars/components/TagKeysTemplateBuilder.tsx
@@ -24,7 +24,7 @@ export const fetchTagKeys = async (
 
 class TagKeysTemplateBuilder extends PureComponent<TemplateBuilderProps> {
   public render() {
-    const {template, source, onUpdateTemplate} = this.props
+    const {template, source, onUpdateTemplate, onChooseValue} = this.props
 
     return (
       <KeysTemplateBuilder
@@ -34,6 +34,7 @@ class TagKeysTemplateBuilder extends PureComponent<TemplateBuilderProps> {
         template={template}
         source={source}
         onUpdateTemplate={onUpdateTemplate}
+        onChooseValue={onChooseValue}
       />
     )
   }
diff --git a/ui/src/tempVars/components/TagValuesTemplateBuilder.tsx b/ui/src/tempVars/components/TagValuesTemplateBuilder.tsx
index dc247244e..141eb7fbd 100644
--- a/ui/src/tempVars/components/TagValuesTemplateBuilder.tsx
+++ b/ui/src/tempVars/components/TagValuesTemplateBuilder.tsx
@@ -28,7 +28,6 @@ interface State {
   tagKeys: string[]
   tagKeysStatus: RemoteDataState
   selectedTagKey: string
-  tagValues: string[]
   tagValuesStatus: RemoteDataState
 }
 
@@ -51,7 +50,6 @@ class KeysTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
       tagKeys: [],
       tagKeysStatus: RemoteDataState.Loading,
       selectedTagKey,
-      tagValues: [],
       tagValuesStatus: RemoteDataState.Loading,
     }
   }
@@ -64,6 +62,7 @@ class KeysTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
   }
 
   public render() {
+    const {template, onChooseValue} = this.props
     const {
       databases,
       databasesStatus,
@@ -74,7 +73,6 @@ class KeysTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
       tagKeys,
       tagKeysStatus,
       selectedTagKey,
-      tagValues,
       tagValuesStatus,
     } = this.state
 
@@ -115,9 +113,9 @@ class KeysTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
           </div>
         </div>
         <TemplateMetaQueryPreview
-          items={tagValues}
+          items={template.values}
           loadingStatus={tagValuesStatus}
-          onChoose={this.handleChooseTagValue}
+          onChoose={onChooseValue}
         />
       </div>
     )
@@ -220,10 +218,7 @@ class KeysTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
       const {tags} = parseShowTagValues(data)
       const tagValues = _.get(Object.values(tags), 0, [])
 
-      this.setState({
-        tagValues,
-        tagValuesStatus: RemoteDataState.Done,
-      })
+      this.setState({tagValuesStatus: RemoteDataState.Done})
 
       const nextValues = tagValues.map(value => {
         return {
@@ -304,21 +299,6 @@ class KeysTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
       },
     })
   }
-
-  private handleChooseTagValue = (tagValue: string) => {
-    const {template, onUpdateTemplate} = this.props
-    const {databases} = this.state
-
-    const nextValues = databases.map(value => {
-      return {
-        type: TemplateValueType.TagValue,
-        value,
-        selected: value === tagValue,
-      }
-    })
-
-    onUpdateTemplate({...template, values: nextValues})
-  }
 }
 
 export default KeysTemplateBuilder
diff --git a/ui/src/tempVars/components/TemplateMetaQueryPreview.tsx b/ui/src/tempVars/components/TemplateMetaQueryPreview.tsx
index 56f5cac15..9c4a28211 100644
--- a/ui/src/tempVars/components/TemplateMetaQueryPreview.tsx
+++ b/ui/src/tempVars/components/TemplateMetaQueryPreview.tsx
@@ -3,12 +3,12 @@ import React, {PureComponent} from 'react'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import TemplatePreviewList from 'src/tempVars/components/TemplatePreviewList'
 
-import {RemoteDataState} from 'src/types'
+import {RemoteDataState, TemplateValue} from 'src/types'
 
 interface Props {
-  items: string[]
+  items: TemplateValue[]
   loadingStatus: RemoteDataState
-  onChoose: (item: string) => void
+  onChoose: (item: TemplateValue) => void
 }
 
 @ErrorHandling
diff --git a/ui/src/tempVars/components/TemplatePreviewList.tsx b/ui/src/tempVars/components/TemplatePreviewList.tsx
index efad0e8d3..22b494d9c 100644
--- a/ui/src/tempVars/components/TemplatePreviewList.tsx
+++ b/ui/src/tempVars/components/TemplatePreviewList.tsx
@@ -5,13 +5,15 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import TemplatePreviewListItem from 'src/tempVars/components/TemplatePreviewListItem'
 
+import {TemplateValue} from 'src/types'
+
 const LI_HEIGHT = 35
 const LI_MARGIN_BOTTOM = 3
 const RESULTS_TO_DISPLAY = 10
 
 interface Props {
-  items: string[]
-  onChoose: (item: string) => void
+  items: TemplateValue[]
+  onChoose: (item: TemplateValue) => void
 }
 
 @ErrorHandling
diff --git a/ui/src/tempVars/components/TemplatePreviewListItem.tsx b/ui/src/tempVars/components/TemplatePreviewListItem.tsx
index 66cdfce35..02dd589f7 100644
--- a/ui/src/tempVars/components/TemplatePreviewListItem.tsx
+++ b/ui/src/tempVars/components/TemplatePreviewListItem.tsx
@@ -1,8 +1,10 @@
 import React, {PureComponent} from 'react'
 
+import {TemplateValue} from 'src/types'
+
 interface Props {
-  item: string
-  onClick: (item: string) => void
+  item: TemplateValue
+  onClick: (item: TemplateValue) => void
   style: {
     height: string
     marginBottom: string
@@ -15,7 +17,7 @@ class TemplatePreviewListItem extends PureComponent<Props> {
 
     return (
       <li onClick={this.handleClick} style={style}>
-        {item}
+        {item.value}
       </li>
     )
   }
diff --git a/ui/src/tempVars/components/TemplateVariableEditor.tsx b/ui/src/tempVars/components/TemplateVariableEditor.tsx
index 081799ff5..720b44e69 100644
--- a/ui/src/tempVars/components/TemplateVariableEditor.tsx
+++ b/ui/src/tempVars/components/TemplateVariableEditor.tsx
@@ -23,6 +23,7 @@ import MetaQueryTemplateBuilder from 'src/tempVars/components/MetaQueryTemplateB
 import {
   Template,
   TemplateType,
+  TemplateValue,
   TemplateBuilderProps,
   Source,
   RemoteDataState,
@@ -148,6 +149,7 @@ class TemplateVariableEditor extends PureComponent<Props, State> {
             <TemplateBuilder
               template={nextTemplate}
               source={source}
+              onChooseValue={this.handleChooseTemplateValue}
               onUpdateTemplate={this.handleUpdateTemplate}
             />
           </div>
@@ -182,6 +184,17 @@ class TemplateVariableEditor extends PureComponent<Props, State> {
     this.setState({nextTemplate})
   }
 
+  private handleChooseTemplateValue = (item: TemplateValue) => {
+    this.setState(({nextTemplate: template}) => {
+      const nextValues = template.values.map(t => ({
+        ...t,
+        selected: t.value === item.value,
+      }))
+
+      return {nextTemplate: {...template, values: nextValues}}
+    })
+  }
+
   private handleChooseType = ({type}) => {
     const {
       nextTemplate: {id, tempVar},
diff --git a/ui/src/types/tempVars.ts b/ui/src/types/tempVars.ts
index cc17663c4..cd5d542b8 100644
--- a/ui/src/types/tempVars.ts
+++ b/ui/src/types/tempVars.ts
@@ -61,4 +61,5 @@ export interface TemplateBuilderProps {
   template: Template
   source: Source
   onUpdateTemplate: (nextTemplate: Template) => void
+  onChooseValue: (item: TemplateValue) => void
 }