JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" class="natureInput">
<div class="natureSuggestions"></div>

JavaScript

// There are usually a lot more, but just for simplification only one is shown
const natures = [
	{ name: "Lonely (Atk ↑ Def↓)" }
];

const natureInput = document.querySelector(".natureInput");
const suggestionsPanelNature = document.querySelector(".natureSuggestions");
// This is just used to see whether they have chosen one of the options
let set_nature = 0;

natureInput.addEventListener('keyup', function () {
	set_nature = 0;
	const input = natureInput.value;
	suggestionsPanelNature.innerHTML = '';
	// Find all of the natures that start with the input
	const suggestions = natures.filter(function (nature) {
		return nature.name.toLowerCase().startsWith(input.toLowerCase());
	});
	suggestions.forEach(function (suggested) {
		// Display all matching natures
		const div = document.createElement("div");
		div.onclick = function () {
			set_nature = 1;
			natureInput.value = suggested.name; // This is the line that seems to be causing issues
			suggestionsPanelNature.innerHTML = '';
		};
		div.classList.add("suggestion");
		div.innerHTML = suggested.name; // This line, however, works fine
		suggestionsPanelNature.appendChild(div);
	});
	if (input === '') {
		suggestionsPanelNature.innerHTML = '';
	}
})