facebookexperimental/Recoil

Setter in selector forces the input cursor to jump to end of input field on change event

Open

#488 opened on Jul 19, 2020

View on GitHub
 (6 comments) (0 reactions) (0 assignees)JavaScript (1,151 forks)batch import
enhancementhelp wanted

Repository metrics

Stars
 (19,428 stars)
PR merge metrics
 (No merged PRs in 30d)

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...

Contributor guide