Templating: Json interpolation of single-value default selection does not create valid json (#79137)

public/app/features/variables/state/actions.test.ts

@@ -305,7 +305,7 @@ describe('shared actions', () => {
           key,
           setCurrentVariableValue(
             toVariablePayload(stats, {
-              option: { text: ALL_VARIABLE_TEXT, value: ALL_VARIABLE_VALUE, selected: false },
+              option: { text: [ALL_VARIABLE_TEXT], value: [ALL_VARIABLE_VALUE], selected: true },
             })
           )
         ),
@@ -473,8 +473,8 @@ describe('shared actions', () => {
         ${['A', 'B', 'C']} | ${['B']}      | ${'C'}       | ${['B']}      | ${true}
         ${['A', 'B', 'C']} | ${['B', 'C']} | ${undefined} | ${['B', 'C']} | ${true}
         ${['A', 'B', 'C']} | ${['B', 'C']} | ${'C'}       | ${['B', 'C']} | ${true}
-        ${['A', 'B', 'C']} | ${['X']}      | ${undefined} | ${'A'}        | ${false}
-        ${['A', 'B', 'C']} | ${['X']}      | ${'C'}       | ${'A'}        | ${false}
+        ${['A', 'B', 'C']} | ${['X']}      | ${undefined} | ${['A']}      | ${true}
+        ${['A', 'B', 'C']} | ${['X']}      | ${'C'}       | ${['A']}      | ${true}
       `(
         'then correct actions are dispatched',
         async ({ withOptions, withCurrent, defaultValue, expectedText, expectedSelected }) => {

public/app/features/variables/state/actions.ts

@@ -506,7 +506,11 @@ export const validateVariableSelectionState = (
       // if none pick first
       if (selected.length === 0) {
         const option = variableInState.options[0];
-        return setValue(variableInState, option);
+        return setValue(variableInState, {
+          value: typeof option.value === 'string' ? [option.value] : option.value,
+          text: typeof option.text === 'string' ? [option.text] : option.text,
+          selected: true,
+        });
       }
 
       const option: VariableOption = {