facebookexperimental/Recoil
View on GitHubSetter in selector forces the input cursor to jump to end of input field on change event
Open
#488 opened on Jul 19, 2020
enhancementhelp wanted
Description
I'm using a selector to get and set values via useRecoilState. Here are my atom and selector:
// Atom for lng and lat values, not really used anywhere but in the selector below
export const locationStateAtom = atom({
key: "locationStateAtom",
default: {
lng: null,
lat: null
}
});
// locationState is selector that gets async values from geolocation API (mocked here) if values are not set, otherwise returns the latest set values.
// to set the vales of this selector I needed locationStateAtom defined above
export const locationState = selector({
key: "locationState",
get: async ({ get }) => {
try {
const location = get(locationStateAtom);
if (!location.lng || !location.lat) {
const { lng, lat } = await geoLocation;
return { lng, lat };
}
return location;
} catch (e) {
console.log(e.message);
}
},
set: ({ set }, newValue) => {
set(locationStateAtom, newValue);
}
});
And here's how I'm using it:
function LocationForm() {
const [location, setLocation] = useRecoilState(locationState);
const resetLocation = useResetRecoilState(locationState);
const handleOnChange = e => {
e.preventDefault();
setLocation(prevState => ({
...prevState,
[e.target.name]: e.target.value
}));
};
return (
<>
<h3>Location form</h3>
{location && (
<form>
<input
type="text"
name="lat"
placeholder="lat"
value={location.lat}
onChange={handleOnChange}
/>
<input
type="text"
name="lng"
placeholder="lng"
value={location.lng}
onChange={handleOnChange}
/>
<button type="button" onClick={e => resetLocation()}>
Reset location
</button>
</form>
)}
</>
);
}
So if you want to change the coords (i.e. start typing in the input) the cursor will automatically jump at the end. Here's a working example: https://stackblitz.com/edit/react-exchjb?file=index.js
Seems like a bug or perhaps I'm not using the Recoil lib correctly...