Is there any way to access the e.target.value of onIonInput? I’d like to setState(e.target.value) using this method since the onIonChange is reserved for a debounce reducer function.
If you look at the typings you’ll see that they emit different type of events, and the onIonInput one doesn’t have a value.
/**
* Emitted when the value has changed.
*/
"onIonChange"?: (event: CustomEvent<InputChangeEventDetail>) => void;
/**
* Emitted when a keyboard input occurred.
*/
"onIonInput"?: (event: CustomEvent<KeyboardEvent>) => void;
I’m not clear exactly why you cannot use onIonChange?
Because basically I’m using the onIonChange for the debounce, but I want a loading skeleton to appear immediately upon typing. However, calling a setLoading() in the onIonInput will call that function on every keystroke, so I was thinking to have a if (input.length) (a state linked to the onIonInput) in a useEffect.
Having the setLoading linked to the onIonChange will only fire off after the debounce
Still not sure why you cannot do both things in the onIonChange handler, i.e. first call setLoading then debounce.
Because the onIonChange is tied to the <Searchbar>'s debounce. I don’t see a way to avoid it according to the official docs.
Oh, debounce in the Searchbar, I see what you mean now. Maybe you could call some other debounce function instead of using the one built into the Searchbar.
You could also directly use onInput on the IonSearchbar and access e.target.value there, along with doing your own debouncing. I’ve done that in the past.