runic oyster
Hey everyone!! I am working on an app that has a component called Input and it has a useEffect to update UI when someone starts typing but when i submit the form and press back the fields are still pre-filled which i like but the UI from the useEffect is not firing! Is this the design of remix or do i need to add a hook in order to fix this?
runic oyster
const inputWrap = useRef();
useEffect(() => {
if (inputWrap.current.querySelector("input").defaultValue !== "") {
inputWrap.current.classList.add("is-focused");
}
inputWrap.current.addEventListener("focus", focus, true);
inputWrap.current.addEventListener("blur", blur, true);
inputWrap.current.addEventListener("load", load, true);
function focus() {
this.classList.add("is-focused");
}
function blur() {
var input = this.querySelector("input");
if (input !== null && input.value === "") {
this.classList.remove("is-focused");
}
}
function load() {
var input = this.querySelector("input");
if (input !== null && input.value !== "") {
this.classList.add("is-focused");
}
}
}, []);
this is my code so i figured it should run again when i press the back button
https://web.dev/bfcache/#optimize-your-pages-for-bfcache reading this to see if i can find an event for the back cache
