Single select2 with data array and default empty

How Do I...
#1

Hi there! I’m struggling to get my select2 to show the placeholder on opening. Instead of showing the placeholder, the first item gets selected. I can deselect it, but that’s not really what I want. Strange thing is that I only see this behavior if I use a data array, not if I use a list of options. What am I doing wrong here?

This is working correctly (showing the placeholder when the pages is loaded):

<select class="js-basic-single-data select2" id="demo1" name="demo1">
	<option></option>
	<option value="1">Tester</option>
</select>

<script>
	$(document).ready(function() {
		$('#demo1').select2({
			width: '50%',
			placeholder: "Please select a value",
			allowClear: true
		});
	});
</script>

But this version doesn’t work (It’s showing “Tester”):

<select class="js-basic-single-data select2" id="demo2" name="demo2">
</select>

<script>
	var option_type_data = [
		{
			id: 1,
			text: "Tester",
		},
	];

	$(document).ready(function() {
		$('#demo2').select2({
			data: option_type_data,
			width: '50%',
			placeholder: "Please select a value",
			allowClear: true
		});
	});
</script>

I’ve tried adding an empty option, but that’s getting added to the list too then.

Any suggestions?