I want to trigger input type="file"
click when state outside the component has changed.
When updated state is passed as prop and useEffect function is excecuted everything work as expected.
When updated state is passed as useRecoilState
it seems like it doesn't work (but only in safari) - it triggers useEffect as expected but inputRef.current.click()
doesn't work.
Here is the working code presenting the problem: https://codesandbox.io/s/useeffect-recoil-trigger-vs-prop-w7lwq?file=/src/index.js:315-329
And here is code:
export const recoilTriggerAtom = atom({
key: "recoilTriggerAtom",
default: 0
});
function ChildComponent({ propTrigger }) {
const [recoilTrigger] = useRecoilState(recoilTriggerAtom);
const inputRef = useRef(null);
useLayoutEffect(() => {
if (recoilTrigger > 0) {
console.log("here it doesn't work in Safari");
inputRef.current.click();
}
}, [recoilTrigger]);
useLayoutEffect(() => {
if (propTrigger > 0) {
console.log("here it works in Safari");
inputRef.current.click();
}
}, [propTrigger]);
const onFileSelected = (e) => {
console.log("onFileSelected", e.target.files[0]);
};
return (
<div className="App">
<input type="file" ref={inputRef} onChange={onFileSelected} />
</div>
);
}
function ParentComponent() {
const [propTrigger, setPropTrigger] = useState(0);
const [recoilTrigger, setRecoilTrigger] = useRecoilState(recoilTriggerAtom);
const updateRecoilTrigger = () => {
setRecoilTrigger(recoilTrigger + 1);
};
const updatePropTrigger = () => {
setPropTrigger(propTrigger + 1);
};
return (
<div>
<button onClick={updateRecoilTrigger}>Recoil trigger</button>
<button onClick={updatePropTrigger}>Prop trigger</button>
<ChildComponent propTrigger={propTrigger} />
</div>
);
}
function Root() {
return (
<RecoilRoot>
<ParentComponent />
</RecoilRoot>
);
}