[FormsyText] Add updateImmediately prop & fix handleChange #109

mbrookes · 2016-06-06T21:47:10Z

I believe this resolves the various issues for both use cases. Let me know!

This is based in part on and supersedes @codaholicguy's PR: #103.

If you use onValid / onInvalid to control the submit button, and the last form element before the submit button is a text-field, you should use updateImmediately on that field to provide an error as to why the form can't be submitted without the user having to remove focus from that field.

I increased the timeout slightly, as otherwise the error can come in while still typing for a slower typist.

If you don't control the submit button (or the textfield isn't the last value before the button), the default behaviour is now consistent. onValid / onInvalidupdate immediately, but the error only appears when focus shifts.

Closes #97.

Accepts Formsy.Form.reset()

vkbrad · 2016-06-09T03:42:31Z

👍

- Make sure that both value and defaultValue can be provided. - Make sure that changing the props and resetting the form works. - Also fix reset to work, when value and defaultValue are not specified. - Only update the pristine value, but not the actual value, in case props.defaultValue has changed. - Add tests for value and defaultValue props interactions. - Remove previous componentWillReceiveProps which targeted to fix reset. Also, update peer dependency

Fix text input values, and form reset

leMaik · 2016-07-12T10:31:22Z

Works great for me so far, but I think that throttle is better in this case (difference between throttle and debounce). Otherwise, the form doesn't get re-validated while typing (at rather fast speed) but only after typing.

Fixes React 15.2 unknown props warnings. Closes #119.

jayalfredprufrock · 2016-07-29T17:29:39Z

Agreed that throttle seems to make more sense for this use case. I'd love to see this pull request get merged as I've been dealing with the "last text input in a form not enabling the submit button" issue for quite some time and it really does cause confusion for some users. Is there something I can do to help?

codeaholicguy · 2016-07-29T18:12:31Z

I see. Throttle seems to be better for this case. What is status of this pull request?

mbrookes · 2016-07-29T21:13:39Z

@codeaholicguy It needs a rebase after recent merges. I can see pros and cons to throttle vs. debounce, but I'm not yet convinced that throttle would be preferable. I'm open to feedback as to why. With throttle, a slower typist is going to get an error when their going-to-be-valid, but as yet incomplete entry hits the throttle timeout.

With debounce, a fast typist doesnt get an error until they're done, but if they're a fast typist, they can fix thier error quickly. 😄

mbrookes · 2016-07-29T21:15:58Z

@jayalfredprufrock

Is there something I can do to help?

When we agree on the best approach, you're welcome to take this PR, fix it up and resubmit it.

jayalfredprufrock · 2016-07-29T22:58:00Z

@mbrookes I hear ya, and I could certainly be happy with either.

I think the reason this is a tough call is we have two use cases for the updateImmediately prop:

Notifying the user that their input is invalid without requiring them to move to the next field. In this case debounce is preferable to prevent bombarding the user with error messages before they've been given a chance to finish typing.
Notifying the user immediately when their input is valid. In this case, throttle is preferable so the user gets notified as soon as possible, eg. validation errors get cleared, submit buttons enabled, etc.

If I had to choose one, the latter seems more useful. My guess is accomplishing both effects would require some non-trivial internal changes, but perhaps we could provide the two versions separately via two different props?? So updateImmediately would provide a throttled version and another prop, say updateWhenIdle, would provide a debounced version?

mbrookes · 2016-07-30T14:20:39Z

Having the choice via a prop would be good, but what should the default be? 😄

teknologist · 2016-08-31T14:57:33Z

Hi,

Any news on this one ?

Many thanks.

fix typo

codeaholicguy · 2016-09-14T03:01:02Z

@mbrookes can I take responsibility of rebasing this PR?

remote: Permission to mbrookes/formsy-material-ui.git denied to codeaholicguy.
fatal: unable to access 'https://github.com/mbrookes/formsy-material-ui.git/': The requested URL returned error: 403

mbrookes · 2016-09-14T14:24:41Z

@codeaholicguy Yes please!!!

codeaholicguy · 2016-09-14T14:45:25Z

@mbrookes I rebased

mbrookes · 2016-09-14T18:55:05Z

Thanks @codeaholicguy!

I'm merging this as is, as I don't have the cycles to review right now, but since this is mostly based on your code, I know it's good!

I think it would be good to get community feedback before we release, so lets hold back on pushing to npm for a bit and see if this throws up any issues.

BTW, I gave you write access to the repo, so feel free to make other changes, or merge good PRs.

codeaholicguy · 2016-09-14T19:35:02Z

@mbrookes thank you! Should I merge this PR or wait for you?

mbrookes · 2016-09-14T23:19:36Z

Oops! In my haste I forgot to confirm the merge. Done now.

ryanblakeley · 2016-10-14T00:24:55Z

I'm using this updateImmediately option and getting a new error in the browser console.

Unknown prop `updateImmediately` on <input> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

codeaholicguy · 2016-10-14T03:44:31Z

@rojobuffalo currently, it hasnt been tagged yet, so please use formsy-material-ui direct from github source

valoricDe · 2016-10-24T13:29:23Z

Hi, thanks for this PR. Could you explain why you added a debounce? @jayalfredprufrock Could you explain how a user gets bombarded by error messages? Either the input is already invalid, so the message is already shown under the textfield or the input gets invalid, and as soon as this happens I want to know about and not wait for 400ms.

jayalfredprufrock · 2016-10-24T17:21:24Z

The debounce behavior becomes desirable when you have an input that is guaranteed to fail validation at the first key stroke. Consider a password confirmation field or an email field. It's a little distracting to see the flash of an error message telling you your password is incorrect or email invalid when you just haven't had a chance to finish typing. In a perfect world, the user would be notified immediately when the field becomes valid, but only notified of invalid input after a short idle period.

Earlier I was suggesting some kind of "updateWhenIdle" type functionality where the field can only be invalidated after it has received focus and at least one character, and the user hasn't typed any thing in 400ms. Haven't had a chance to look at the above implementation to know how things are supposed to work now, but it sounds like either way this is a nice improvement to what we had before.

valoricDe · 2016-10-27T16:34:26Z

@jayalfredprufrock I like the ideal world ^^, maybe following merge request goes into this direction: #155

codeaholicguy and others added 4 commits May 20, 2016 12:39

Add prop updateImmediately to FormsyText

b5c0229

Update FormsyText.jsx

5f5610c

Add debounce for setValue on key pressed

8512062

Update for more dry code

4ef563a

mbrookes added the bug label Jun 6, 2016

mbrookes mentioned this pull request Jun 6, 2016

Add prop updateImmediately to FormsyText #103

Merged

[FormsyText] Add updateImmediately prop & fix handleChange

5affb7d

mbrookes force-pushed the formsytext-fix-error-on-update branch from 4708bf1 to 5affb7d Compare June 6, 2016 22:09

Merge pull request #106 from Mokto/patch-1

b559bd8

Accepts Formsy.Form.reset()

mbrookes mentioned this pull request Jun 7, 2016

Needs a new release / NPM and Repo out of sync #112

Closed

mbrookes mentioned this pull request Jun 21, 2016

Typing in FormsyText doesn't update Form validity #97

Closed

reebalazs and others added 2 commits July 11, 2016 17:25

Merge pull request #111 from reebalazs/fix-text-input-2

8928830

Fix text input values, and form reset

jayalfredprufrock and others added 3 commits July 13, 2016 15:04

Fixes React 15.2 unknown props warnings.

00f0c5b

Merge pull request #120 from jayalfredprufrock/master

11729a2

Fixes React 15.2 unknown props warnings. Closes #119.

Release 0.5.0

30cc83f

davidascher and others added 2 commits September 11, 2016 18:33

fix typo

750cd85

Merge pull request #137 from davidascher/patch-4

46ef37c

fix typo

Merge branch from master

61314ac

mbrookes merged commit ff14bc3 into master Sep 14, 2016

codeaholicguy deleted the formsytext-fix-error-on-update branch October 4, 2016 06:44

codeaholicguy mentioned this pull request Oct 7, 2016

Support matchRegexp #141

Closed

ryanblakeley mentioned this pull request Oct 13, 2016

Request for tag v0.5.1 #147

Closed

ryanblakeley mentioned this pull request Dec 2, 2016

[BUG]: Formsy-react is using state._value but formsy-material-ui using state.value #133

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FormsyText] Add updateImmediately prop & fix handleChange #109

[FormsyText] Add updateImmediately prop & fix handleChange #109

mbrookes commented Jun 6, 2016 •

edited

Loading

vkbrad commented Jun 9, 2016

leMaik commented Jul 12, 2016 •

edited

Loading

jayalfredprufrock commented Jul 29, 2016

codeaholicguy commented Jul 29, 2016

mbrookes commented Jul 29, 2016

mbrookes commented Jul 29, 2016

jayalfredprufrock commented Jul 29, 2016

mbrookes commented Jul 30, 2016

teknologist commented Aug 31, 2016

codeaholicguy commented Sep 14, 2016

mbrookes commented Sep 14, 2016

codeaholicguy commented Sep 14, 2016

mbrookes commented Sep 14, 2016 •

edited

Loading

codeaholicguy commented Sep 14, 2016

mbrookes commented Sep 14, 2016 •

edited

Loading

ryanblakeley commented Oct 14, 2016

codeaholicguy commented Oct 14, 2016

valoricDe commented Oct 24, 2016

jayalfredprufrock commented Oct 24, 2016 •

edited

Loading

valoricDe commented Oct 27, 2016

[FormsyText] Add updateImmediately prop & fix handleChange #109

[FormsyText] Add updateImmediately prop & fix handleChange #109

Conversation

mbrookes commented Jun 6, 2016 • edited Loading

vkbrad commented Jun 9, 2016

leMaik commented Jul 12, 2016 • edited Loading

jayalfredprufrock commented Jul 29, 2016

codeaholicguy commented Jul 29, 2016

mbrookes commented Jul 29, 2016

mbrookes commented Jul 29, 2016

jayalfredprufrock commented Jul 29, 2016

mbrookes commented Jul 30, 2016

teknologist commented Aug 31, 2016

codeaholicguy commented Sep 14, 2016

mbrookes commented Sep 14, 2016

codeaholicguy commented Sep 14, 2016

mbrookes commented Sep 14, 2016 • edited Loading

codeaholicguy commented Sep 14, 2016

mbrookes commented Sep 14, 2016 • edited Loading

ryanblakeley commented Oct 14, 2016

codeaholicguy commented Oct 14, 2016

valoricDe commented Oct 24, 2016

jayalfredprufrock commented Oct 24, 2016 • edited Loading

valoricDe commented Oct 27, 2016

mbrookes commented Jun 6, 2016 •

edited

Loading

leMaik commented Jul 12, 2016 •

edited

Loading

mbrookes commented Sep 14, 2016 •

edited

Loading

mbrookes commented Sep 14, 2016 •

edited

Loading

jayalfredprufrock commented Oct 24, 2016 •

edited

Loading