Vega text mark renders "undefined" when not hovering - vega

Question

I'm trying to create a simple bar chart using Vega on the Vega editor.
To re-create my issue, navigate to this bar chart example on vega site, and try to change the text property of the text mark as follows:
Original: "text": {"signal": "tooltip.amount"},
Modify to: "text": {"signal": "tooltip.amount + ' + ' + tooltip.category"},
This leads to undefined + undefined displayed on the top left corner of the chart when no hover event occurs. How do I get around this issue to make sure its not displayed? (issue depicted below)
I think this is something to do with how the scales and the text mark are functioning, but I was not able to figure out the solution. Tried adding a default value in mouse hover events by setting category to null and testing it while configuring mark opacity, but it didn't work. Code for this (only specifying updates to the raw example on site):
"signals": [
{
"name": "tooltip",
"value": {"category":null},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{'category':null}"}
]
}
],
...
"marks": [
...
{
"type": "text",
"encode": {
...
"update": {
"text": {"signal": "tooltip.amount + ' + ' tooltip.category"},
"fillOpacity": [
{"test": "datum === tooltip && tooltip.category!=null", "value": 0},
{"value": 1}
]
}
}
}

Answer 1

Thanks to a friend for helping me with the answer:
"text": [
{
"signal": "tooltip.amount + ' + ' + tooltip.category",
"test": "tooltip.amount"
},
{"value": ""}
],
The issue was when you hover out the tooltip object does not have a value
since we are concatenating the values with the ' + ' string. The undefined object is coerced to the 'undefined' string.
Updating the string value to an empty string again is what is required.