Skip to content

[Proposal] Add type property for Button component #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
maxceem opened this issue May 6, 2018 · 3 comments
Closed

[Proposal] Add type property for Button component #11

maxceem opened this issue May 6, 2018 · 3 comments

Comments

@maxceem
Copy link
Contributor

maxceem commented May 6, 2018

It can be useful to be able to set property type for Button component.
For example adding type="submit" for buttons enables automatic form submittion when we press <Enter> in a form field.

@birdofpreyru
Copy link
Collaborator

Probably, a submitForm flag, rather than type param, will be better?

My current thoughts: to make it work both when our <Button> renders into <button> or <a>, we should not rely on <button>'s type property, but, when we want such behavior, we just prepend onClick handler with a simple JS code that lookups the closest enclosing form in the HTML hierarchy and triggers submission?

Also, if we use Redux, using such option seems to be a cheat to me, as it avoids using Redux action. But, yeah, we still can provide such option.

@maxceem
Copy link
Contributor Author

maxceem commented May 6, 2018

Just in my opinion type property would be better than custom submitForm as everybody is familiar with that property.
<Button> component already has some properties which are only applied to the link only, so having some property which is applied to the button only seems ok.

To clarify, it's not enough to handle onClick event to implement the behavior I was talking about. I'm talking about form submission when we press Enter key in any form field which causes form to submit. To implement it we have to handle onKeyPress event for each form field and check whether 'Enter' was pressed.

Regarding Redux, we are not encorouged to cheat here, as we can call the same Redux action on form submit:

<form onSubmit={(evt) => {
  evt.preventDefault();
  dispatch(getReduxAction());
}}>
   <input type="text" /> // we press Enter in this field
   <Button type="submit">Submit</Button>
</form>

PS. Only downside of having type property is that generally we can set it to reset. And pressing such button will clear all form fields. So probably this values has to be banned in some way. As it would break Redux approach.

@birdofpreyru
Copy link
Collaborator

Okay, I was saying wrong stuff :)
Feel free to add optional type prop as you suggest, and also onKeyPress can be added as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants