How to handle the basic input event 'compositionupdate' in premiere panel development

Test Code 

<input type="text" id="inputField" placeholder="input text">
<input type="text" id="outputField" readonly>

<script>
	const inputField = document.getElementById('inputField');
	const outputField = document.getElementById('outputField');
	let compositionData = '';

	inputField.addEventListener('compositionstart' , (e) => {
		console.log('compositionstart');
		compositionData = e.data;
	});

	inputField.addEventListener('input', (e) => {
		console.error('input');
	});

	inputField.addEventListener('keydown', (e) => {
		console.warn('keydown');
	});

	inputField.addEventListener('compositionupdate' , (e) => {
		console.log('compositionupdate');
		compositionData = e.data;
		outputField.value = `compositionupdate: ${compositionData}`;
	});

	inputField.addEventListener('compositionend', (e) => {
		console.log('compositionend');
		compositionData = e.data;
		outputField.value = `compositionend: ${compositionData}`;
	});
</script>