final-form / react-final-form-listeners Goto Github PK
View Code? Open in Web Editor NEWA collection of components to listen to π React Final Form fields
License: MIT License
A collection of components to listen to π React Final Form fields
License: MIT License
Feature request
No react 18
React 18
Is there any appetite for official React 18 support, or is 17 the end of the road for rffl?
Bug Report
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 (?)
<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.
https://codesandbox.io/s/ecstatic-kare-2jcts?file=/target.js
See sandbox: newest everything
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.
bug report
When a user clicks on a checkbox label, the event on the input is throttled causing the listening field stale to become stale.
It should toggle quickly like clicking on the input directly does.
https://codesandbox.io/s/zk2kmrwppm
Check both boys and girls then successively click the boys/girls label.
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",
This example is being used for another issue.
Does the plugin has custom hooks as future development?
bug report
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.
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."
"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)
It seems like there's an infinite loop that <onChange name={value}/>
throws if the watched value happens to be NaN
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
Bug report (minor update of a peer dependency, react-final-form (6.4.0 -> 6.5.0), causes breaking change).
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
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 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.
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)
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
"react": "^18.2.0",
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;
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.