Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

When a user clicks on a checkbox label, the event on the input is throttled causing the listening field stale to become stale.

What is the expected behavior?

It should toggle quickly like clicking on the input directly does.

Sandbox Link

https://codesandbox.io/s/zk2kmrwppm

Check both boys and girls then successively click the boys/girls label.

What's your environment?

OSX, Node v8.11.1, npm 5.6.0

    "final-form": "^4.10.0",
    "react-final-form": "^3.6.5",
    "react-final-form-listeners": "^1.0.1",

Other information

This example is being used for another issue.

OnFocus event is only firing once.

Looking at this line:
https://github.com/final-form/react-final-form-listeners/blob/master/src/OnFocus.js#L32

state.previous will never be set back to false.

Sorry for not giving you heaps of info, this seems like an easy enough fix.

LOVING final-form and your react wrappers (currently migrating away from redux forms)

What is the current behavior?

ERESOLVE unable to resolve dependency tree

Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.3.0 || ^16.0.0 || ^17.0.0" from [email protected]
npm ERR! node_modules/react-final-form-listeners
npm ERR!   react-final-form-listeners@"*" from the root project

What's your environment?

"react": "^18.2.0",

What is the current behavior?

https://codesandbox.io/s/52q597j2p

Try OnBlur event here. It doesnt fire the children function when element loses focus.

`
const WhenFieldChanges = ({ field, becomes, set, to }) => (

{(
// No subscription. We only use Field to get to the change function
{ input: { onChange } }
) => (

{({ form }) => (
<React.Fragment>

      <OnChange name={field}>
        {value => {
          if (value === becomes) {
            onChange(to);
          }
        }}
      </OnChange>
      <OnBlur  name={field}>
        {
          () => {
            console.info("got blurred sdhfghjdsgfhdsgfsdfdsjh")
          }
        }
      </OnBlur>
      </React.Fragment>
    )}
  </FormSpy>
)}

It would be nice if u provide a working example.

I need to change the value of the give field if the value of the resave field changes and vice versa.

here is an example of my code:

import React from 'react';
import { Form, Field } from 'react-final-form';
import { OnChange } from 'react-final-form-listeners';

import RenderField from '../../components/Forms/FieldRender';
import FieldBtns from '../../components/Forms/FieldBtns';
// import AutoSave from '../../components/Forms/AutoSave';

const WhenFieldChanges = ({
  field,
  becomes,
  set,
  to,
}) => (
  <Field name={set} subscription={{}}>
    {(
      // No subscription. We only use Field to get to the change function
      { input: { onChange } },
    ) => (
      <OnChange name={field}>
        {() => {
          if (becomes) {
            onChange(to);
          }
        }}
      </OnChange>
    )}
  </Field>
);

let prevGiveCurrency;
let prevReceiveCurrency;

let prevGive;
let prevReceive;

const ExchangeForm = ({
  onSubmit,
  pairs,
  exchangeSetFrom,
  exchangeSetTo,
  price,
}) => (
  <div>
    <Form
      onSubmit={onSubmit}
      initialValues={{
        give: 0,
        receive: 0,
        giveCurrency: 'BTC',
        receiveCurrency: 'USD',
      }}
      // validate={(values) => {
      //   const errors = {};
      //   return errors;
      // }}
      render={({
        handleSubmit,
        submitting,
        values,
      }) => {
        prevGive = values.give;
        prevReceive = values.receive;

        if (prevGiveCurrency !== values.giveCurrency) {
          exchangeSetFrom(values.giveCurrency);
        }
        prevGiveCurrency = values.giveCurrency;

        if (prevReceiveCurrency !== values.receiveCurrency) {
          exchangeSetTo(values.receiveCurrency);
        }
        prevReceiveCurrency = values.receiveCurrency;

        return (
          <form onSubmit={handleSubmit}>
            {/* <AutoSave debounce={0} save={onSubmit} /> */}

            <WhenFieldChanges
              field="give"
              becomes={price}
              set="receive"
              to={values.give * price}
            />

            <WhenFieldChanges
              field="receive"
              becomes={price && values.receive !== prevReceive}
              set="give"
              to={values.receive * price}
            />

            <div className="form__field exchange__field">
              <label htmlFor="give" className="form__field-label">I give</label>
              <Field
                id="give"
                name="give"
                component={RenderField}
                type="text"
                placeholder={0}
              />
              <div className="form__field-select">
                <Field name="giveCurrency" component="select">
                  {pairs.map(pair => (
                    <option key={pair.fromSymbol} value={pair.fromSymbol}>{pair.fromSymbol}</option>
                  ))}
                </Field>
              </div>
            </div>
            <div className="form__field exchange__field">
              <label htmlFor="receive" className="form__field-label">I receive</label>
              <Field
                id="receive"
                name="receive"
                component={RenderField}
                type="text"
                placeholder={0}
              />
              <div className="form__field-select">
                <Field name="receiveCurrency" component="select">
                  {pairs.find(e => e.fromSymbol === values.giveCurrency)
                  && pairs.find(e => e.fromSymbol === values.giveCurrency).toSymbols.map(symbol => (
                    <option key={symbol} value={symbol}>{symbol}</option>
                  ))}
                </Field>
              </div>
            </div>
            <div className="form__btns exchange__btns">
              <FieldBtns
                type="submit"
                colorBtn="btn-success"
                sizeBtn="middle"
                classBtn="btn-login"
                translate="Exchange"
                disabled={submitting}
              />
            </div>
            <pre>{JSON.stringify(values, 0, 2)}</pre>
          </form>
        );
      }}
    />
  </div>
);

export default ExchangeForm;

Are you submitting a bug report or a feature request?

Bug report (minor update of a peer dependency, react-final-form (6.4.0 -> 6.5.0), causes breaking change).

What is the current behavior?

When using an <OnChange> component without name attribute specified, it used to pass a whole values object to the children callback as an argument. But with a recent update of react-final-form from 6.4.0 to 6.5.0, the error started appearing:

prop name cannot be undefined in <Field> component

What is the expected behavior?

The callback passed a whole object of values if no field name specified to listen to in <OnChange> component. See the screenshot with desired behavior below.

Sandbox Link

Sandbox with desired behavior (notice an outdated react-final-form version, 6.4.0). Try typing in fields and see the console output.
https://codesandbox.io/s/affectionate-raman-r7qm4?file=/src/App.js&expanddevtools=1

Try changing the version to the latest, and error starts appearing.

Are you submitting a bug report or a feature request?

Feature request

What is the current behavior?

No react 18

What is the expected behavior?

React 18

Is there any appetite for official React 18 support, or is 17 the end of the road for rffl?

Does the plugin has custom hooks as future development?

It seems like there's an infinite loop that <onChange name={value}/> throws if the watched value happens to be NaN

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

I’m using this inside a field array, I basically want to reset an input text field on change of a dropdown/select field item. It works fine as expected. But when I delete that row, the field-array template is re-rendered that causes the onChange of the dropdown in each row to execute again that resets the other selections made by the user.

What is the expected behaviour?

The expected behaviour is that the onChange handler should only be called when a user performs a change to the input/select. It shouldn't be called by re-render of FieldArray.

I've followed the example that is mentioned here: It says that "It’s important to notice that the function given to OnChange will only be called when the value changes, not on every render."

Sandbox Link

What's your environment?

"react": "^16.3.2",
"react-apollo": "^2.3.1",
"react-beautiful-dnd": "^9.0.2",
"react-dom": "^16.3.2",
"react-final-form": "^3.6.2",
"react-final-form-listeners": "^1.0.1",
"react-final-form-arrays": "^1.0.6"
Mac - Chrome Browser Version 70.0.3538.110 (Official Build) (64-bit)

by this example https://codesandbox.io/s/72j0kzqr3j it works great with onChange, but we need to validate also onBlur but there is no value in render props

I noticed that onBlur isn't something that you can pass to a Field, and that RFF is passing its own onBlur through to the underlying input instance when I wrap an input.

Then there's this lib, which listens to RFF state to infer whether a field has been focused, rather than tying into the existing lib.

Is there a technical reason for this? Otherwise I'm having a hard time understanding this lib's existence.

Are you submitting a bug report or a feature request?

Bug Report

What is the current behavior?

I have a field, a. Depending on the value of a, another field, b, appears. Additionally, when changing a, we need to change the value of b as well (either setting it or clearing it out). It's possible to get the value of b to read one thing, even though its value in the form state is something else. When you focus field b it snaps to that other value, seemingly indicating that it didn't rerender after its value changed (?)

What is the expected behavior?

<OnChange /> should work the same as the useEffect hook I commented out in the file. if you use that instead of <OnChange />, it works as I'd expect: the data in the form values should match the data reflected in the form field itself.

Sandbox Link

https://codesandbox.io/s/ecstatic-kare-2jcts?file=/target.js

What's your environment?

See sandbox: newest everything