facebookexperimental/Recoil

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

Open

#488 aberto em 19 de jul. de 2020

Ver no GitHub
 (6 comments) (0 reactions) (0 assignees)JavaScript (1.151 forks)batch import
enhancementhelp wanted

Métricas do repositório

Stars
 (19.428 stars)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 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...

Guia do colaborador