I am working on an autocomplete function for a website and using React. This works fine for Web browsers so far. It works through the onChange function of the <input> html element, like this.
<input
title="Enter Search Term"
placeholder="Enter term..."
className="h-8 w-full p-1 text-black text-m"
// value={textboxValue}
onChange={inputChangeUpdate}
// onChange={(e) => handleTextBoxUpdate(e.currentTarget.value)}
/>
I have a commented two commented out properties - the onChange worked fine previously but would simply not trigger at all for mobile devices, so I switched it to the other onChange event, but I cannot extract the value at all from it. Commenting out value seems to have had no effect.
From what I have researched, React does not support the onChange event for mobile devices or virtual keyboards. I am really stuck here as this seems like a reasonably basic function to perform, but have tried using refs and quite a few different combinations of trying to access the value directly.
Is this possible at all? Any help would be much appreciated, I have spent hours trying to find an answer to this online!
These are the receiving methods:
const handleTextBoxUpdate = (value: string, clearSuggested?: boolean) => {
toggleInvalidTermText(false);
let newValue = value;
setTextboxValue(newValue);
if (newValue.length > 2 && !clearSuggested) {
populateSuggestedSearch(newValue);
} else {
setSuggestedTerms([]);
}
};
const inputChangeUpdate = (e: React.InputHTMLAttributes<HTMLInputElement>) => {
// @ts-ignore
const input = e.currentTarget.value;
handleTextBoxUpdate(input);
console.log(input)
}
I've tried using refs to get the value, passing the event and getting the value, different ways of catching the onChange event, other events to monitor change in the input and none of them work, and the value is just simply not being caught. What I expected to happen is that on mobile keyboards it would trigger the change in value, since it is held on the screen somehow.
