Add onSubmit to form #589

snowystinger · 2020-06-06T01:33:13Z

Closes
Not adding onReset yet, there are too many differences between browsers and between controlled/uncontrolled elements within a form. We can consider onReset in the future if there is need.

✅ Pull Request Checklist:

Included link to corresponding Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

Make sure they aren't filtered out On all of our Form examples, preventDefault so that we don't redirect Not sure if i should make preventDefault a default setting though...

adobe-bot · 2020-06-06T02:30:08Z

Build successful! 🎉

…reset

adobe-bot · 2020-06-08T18:54:11Z

Build successful! 🎉

# Conflicts: # packages/@react-types/form/src/index.d.ts

adobe-bot · 2020-06-09T23:23:58Z

Build successful! 🎉

adobe-bot · 2020-06-10T00:35:18Z

Build successful! 🎉

# Conflicts: # packages/@react-spectrum/provider/docs/Provider.mdx # packages/@react-spectrum/provider/stories/Provider.stories.tsx

adobe-bot · 2020-06-11T18:11:42Z

Build successful! 🎉

joepuzzo · 2020-07-31T15:09:22Z

packages/@react-spectrum/form/src/Form.tsx

+  'target',
+  'onSubmit',
+  'onReset'
+]);


Can you add onKeyDown to this?

joepuzzo · 2020-07-31T15:10:22Z

Any updates on when this will get released?

joepuzzo · 2020-07-31T15:13:31Z

Could you add onKeyDown to the list of props. I use it to control weather enter triggers a submit. https://github.com/joepuzzo/informed/blob/548a4b9298172168688046f19a058cbe1ace268e/src/FormController.js#L517

Here is example https://joepuzzo.github.io/informed/?path=/story/hooks--useform

joepuzzo · 2020-08-03T02:58:42Z

@snowystinger can you please fix the conflict so this can be merged? Much appreciated.

snowystinger · 2020-08-03T16:22:29Z

Hi @joepuzzo, thanks so much for your interest, this work isn't in our immediate sprints. This was really a bit of an exploration. If you'd like to contribute, we could help with that.
On a side note, instead of onKeyDown, could you preventDefault in onSubmit?

joepuzzo · 2020-08-04T14:21:25Z

@snowystinger Key down is for preventing the enter key from submitting the form. I already call preventDefault in the onSubmit. Also, this work seems to already be complete? It just needs to get merged into master and published. Any ideas when that may be as this prevents doing any form submissions. Thanks again for the awesome work.

snowystinger · 2020-08-04T17:38:28Z

@joepuzzo You shouldn't need to do anything other than preventDefault in onSubmit https://www.w3schools.com/jsref/event_preventdefault.asp

As for this PR, there are a lot of issues with onReset right now. You can try them out in different browsers in the stories that I modified specifically for this PR. If you don't need onReset, then we can can accept a smaller PR that just adds onSubmit

joepuzzo · 2020-08-04T23:15:45Z

Hmm what is the issue with onReset exactly? Yes on submit would get me mostly what I need. That would at least allow form submissions to work :)

# Conflicts: # packages/@react-spectrum/provider/docs/Provider.mdx

…now, we can add it back in followup if anyone needs it

devongovett

tests are failing

packages/@react-types/form/src/index.d.ts

did more research, only get and post are valid form methods, other libraries hide this by accepting the others but actually submitting a post request enctype can truly only be three values, any custom ones will result in inconsistent behavior, if something else is needed, then js ajax must be used

adobe-bot · 2020-08-06T18:11:47Z

Build successful! 🎉

adobe-bot · 2020-08-06T18:33:17Z

Build successful! 🎉

adobe-bot · 2020-08-06T19:56:58Z

Build successful! 🎉

adobe-bot · 2020-08-06T20:07:42Z

Build successful! 🎉

joepuzzo · 2020-08-07T12:09:25Z

Thanks guys! What is your release cycle like? Do you release beta when you merge to master?

devongovett · 2020-08-07T17:20:37Z

Should be early next week. We're working on getting automated nightly builds set up as well so should be faster in the future.

joepuzzo · 2020-08-14T12:47:13Z

Any updates on beta releases?

snowystinger · 2020-08-14T16:23:57Z

today or tomorrow hopefully
also, during testing we found that there was some missing behavior, it may not make it into this release unfortunately #904

joepuzzo · 2020-08-14T16:30:18Z

Missing behavior from a forms onSubmit? What is the behavior?

snowystinger · 2020-08-14T16:32:00Z

@LFDanLu found a bug where Forms couldn't be submitted by pressing enter or spacebar on the submit button.

joepuzzo · 2020-08-14T16:48:45Z

That bug already exists. I think it has to do with the button. Not the form

snowystinger added 3 commits June 5, 2020 15:59

Add props to forms

38ab235

Make sure they aren't filtered out On all of our Form examples, preventDefault so that we don't redirect Not sure if i should make preventDefault a default setting though...

add stories and tests

fd909e1

add more example to forms

4669f86

snowystinger requested review from dannify and devongovett as code owners June 6, 2020 01:33

snowystinger added 6 commits June 5, 2020 18:48

make a different form story to showcase reset

5bf015d

prevent reset entirely

ee89c4b

fix types and remove the onReset block

260dea6

now that lint is fixed, prevent reset entirely

d0476dc

how many times can i fail lint! fixed for real

8ee7346

now that lint is fixed for real real, prevent reset entirely

f5892a2

Render a generic form in react as comparison for how it behaves when …

30fdbce

…reset

Merge branch 'master' into add-form-props

acd88b7

# Conflicts: # packages/@react-types/form/src/index.d.ts

Making story a little more condensed

5b85329

Merge branch 'master' into add-form-props

ca00be9

# Conflicts: # packages/@react-spectrum/provider/docs/Provider.mdx # packages/@react-spectrum/provider/stories/Provider.stories.tsx

devongovett changed the base branch from master to main July 12, 2020 00:54

joepuzzo reviewed Jul 31, 2020

View reviewed changes

packages/@react-spectrum/form/src/Form.tsx

'target',

'onSubmit',

'onReset'

]);

Copy link

joepuzzo Jul 31, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add onKeyDown to this?

joepuzzo mentioned this pull request Jul 31, 2020

Form does not allow onSubmit and other form props to be passed. #873

Closed

matthewdeutsch linked an issue Jul 31, 2020 that may be closed by this pull request

Form does not allow onSubmit and other form props to be passed. #873

Closed

snowystinger changed the title ~~Add form props~~ [WIP] Add form props Aug 4, 2020

snowystinger added 2 commits August 4, 2020 17:00

Merge branch 'main' into add-form-props

e7bd85b

# Conflicts: # packages/@react-spectrum/provider/docs/Provider.mdx

Remove onReset from forms because there's too many differences right …

97b796d

…now, we can add it back in followup if anyone needs it

snowystinger changed the title ~~[WIP] Add form props~~ Add onSubmit to form Aug 5, 2020

devongovett requested changes Aug 6, 2020

View reviewed changes

packages/@react-types/form/src/index.d.ts Outdated Show resolved Hide resolved

Merge branch 'main' into add-form-props

7914b23

remove onsubmit handlers to make docs less noisy

54b3b18

devongovett approved these changes Aug 6, 2020

View reviewed changes

Merge branch 'main' into add-form-props

32c8417

devongovett merged commit 5fd2e04 into main Aug 6, 2020

devongovett deleted the add-form-props branch August 6, 2020 21:29

snowystinger mentioned this pull request Dec 6, 2023

Uncontrolled TextField/Input maintains value after it's cleared #5504

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add onSubmit to form #589

Add onSubmit to form #589

snowystinger commented Jun 6, 2020 •

edited

Loading

adobe-bot commented Jun 6, 2020

adobe-bot commented Jun 8, 2020

adobe-bot commented Jun 9, 2020

adobe-bot commented Jun 10, 2020

adobe-bot commented Jun 11, 2020

joepuzzo Jul 31, 2020

joepuzzo commented Jul 31, 2020

joepuzzo commented Jul 31, 2020 •

edited

Loading

joepuzzo commented Aug 3, 2020

snowystinger commented Aug 3, 2020

joepuzzo commented Aug 4, 2020 •

edited

Loading

snowystinger commented Aug 4, 2020

joepuzzo commented Aug 4, 2020

devongovett left a comment

adobe-bot commented Aug 6, 2020

adobe-bot commented Aug 6, 2020

adobe-bot commented Aug 6, 2020

adobe-bot commented Aug 6, 2020

joepuzzo commented Aug 7, 2020

devongovett commented Aug 7, 2020

joepuzzo commented Aug 14, 2020

snowystinger commented Aug 14, 2020

joepuzzo commented Aug 14, 2020

snowystinger commented Aug 14, 2020

joepuzzo commented Aug 14, 2020

Add onSubmit to form #589

Add onSubmit to form #589

Conversation

snowystinger commented Jun 6, 2020 • edited Loading

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

adobe-bot commented Jun 6, 2020

adobe-bot commented Jun 8, 2020

adobe-bot commented Jun 9, 2020

adobe-bot commented Jun 10, 2020

adobe-bot commented Jun 11, 2020

joepuzzo Jul 31, 2020

Choose a reason for hiding this comment

joepuzzo commented Jul 31, 2020

joepuzzo commented Jul 31, 2020 • edited Loading

joepuzzo commented Aug 3, 2020

snowystinger commented Aug 3, 2020

joepuzzo commented Aug 4, 2020 • edited Loading

snowystinger commented Aug 4, 2020

joepuzzo commented Aug 4, 2020

devongovett left a comment

Choose a reason for hiding this comment

adobe-bot commented Aug 6, 2020

adobe-bot commented Aug 6, 2020

adobe-bot commented Aug 6, 2020

adobe-bot commented Aug 6, 2020

joepuzzo commented Aug 7, 2020

devongovett commented Aug 7, 2020

joepuzzo commented Aug 14, 2020

snowystinger commented Aug 14, 2020

joepuzzo commented Aug 14, 2020

snowystinger commented Aug 14, 2020

joepuzzo commented Aug 14, 2020

snowystinger commented Jun 6, 2020 •

edited

Loading

joepuzzo commented Jul 31, 2020 •

edited

Loading

joepuzzo commented Aug 4, 2020 •

edited

Loading