Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Add "form" attribute to buttons of type="submit" #1456

Open
undavide opened this issue Jan 12, 2021 · 9 comments · May be fixed by #7892
Open

Add "form" attribute to buttons of type="submit" #1456

undavide opened this issue Jan 12, 2021 · 9 comments · May be fixed by #7892
Labels
enhancement New feature or request good first issue Good for newcomers rsp:Button rsp:Form

Comments

@undavide
Copy link

undavide commented Jan 12, 2021 •
edited
Loading

🙋 Feature Request

It would be nice to have a "form" attribute for React Spectrum Buttons, when they are of type="submit".

🔦 Context

See the following example coming from the React Spectrum examples page:

<DialogTrigger>
  <ActionButton>Register</ActionButton>
  {(close) => (
    <Dialog>
      <Heading>
        <Flex alignItems="center" gap="size-100">
          <Book size="S" />
          <Text>Register for newsletter</Text>
        </Flex>
      </Heading>
      <Header>
        <Link>
          <a href="//example.com" target="_blank">
            What is this?
          </a>
        </Link>
      </Header>
      <Divider />
      <Content>
        <Form>
          <TextField label="First Name" placeholder="John" autoFocus />
          <TextField label="Last Name" placeholder="Smith" />
          <TextField label="Street Address" placeholder="123 Any Street" />
          <TextField label="City" placeholder="San Francisco" />
        </Form>
      </Content>
      <Footer>
        <Checkbox>
          I want to receive updates for exclusive offers in my area.
        </Checkbox>
      </Footer>
      <ButtonGroup>
        <Button variant="secondary" onPress={close}>
          Cancel
        </Button>
        <Button variant="cta" onPress={close}>
          Register
        </Button>
      </ButtonGroup>
    </Dialog>
  )}
</DialogTrigger>

image

The dialog is nicely designed, and the content is kept separate in the <Heading>, <Content>, and <Footer>.

Problem is that the ButtonGroup, which very likely contains a submit button in such Dialogs, belongs to the Footer, i.e. it's not contained within the <Form> component – hence it can't act as a Button of type="submit".

In HTML it's possible to add a form attribute to a submit Button, so that it can work regardless to its positioning. E.g.

<form id="aForm">
  <!-- stuff -->
</form>
<button type="submit" form="aForm">Submit</button>

A similar possibility for <Form> and React Buttons would be nice to have.

Thanks!
@LFDanLu LFDanLu added the enhancement New feature or request label Jan 13, 2021
@LFDanLu
Copy link
Member

LFDanLu commented Jan 13, 2021

@undavide Allowing the form attribute on a button seems pretty reasonable, lemme double check with the team just in case.

@devongovett
Copy link
Member

devongovett commented Jan 27, 2021 •
edited
Loading

I'm guessing this is related to wanting the enter key to trigger the submit button's action? I'm having a hard time imagining wanting to submit a form in a dialog via the browser which would trigger a full page reload.

If so, it seems related to #855

@undavide
Copy link
Author

Uhm, actually no, my feat request was specifically only about being able to use a submit button when the button itself can't be inside the <form>

@razvanip
Copy link
Contributor

i think there are some other libraries out there regarding forms that usually really on a submit button being present in the form to handle submit

@dmbaughman
Copy link

Since the <Button> component in Spectrum is an implementation of the native <button> element, shouldn't it support all the native attributes?
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-form

I have a similar use case where I was trying to put a form inside the content area of a dialog, and then include a submit button in the footer of the dialog, because wrapping the input and submit buttons in the same <Form> component was breaking the dialog layout.

Notional example of dialog with form fields in content section and submit button in footer

@tchak
Copy link

tchak commented Feb 4, 2023 •
edited
Loading

I think Button should also have name, value, formmethod and formaction attributes. They are all very useful when working with forms. And in frameworks like remix-run forms are used to trigger any actions (they do not trigger full reloads like it was mentioned earlier). In some cases this approach makes it simpler to implement a basic experience even if JavaScript fails for some reason.

@Spooky-0
Copy link

Spooky-0 commented May 5, 2023

I'm struggling with the same Issue. My very ugly workaround right now is to add

  useEffect(() => {
    ref.current?.UNSAFE_getDOMNode().setAttribute("form", "new-field-form");
  }, [ref]);

@donaldr
Copy link

donaldr commented Apr 22, 2024

I've also run into this issue. I have a situation where I'm trying to deal with a nested form. The natural conclusion is instead to have self-closing forms with ids that the inputs then refer to. This doesn't seem possible to do with react-spectrum.

@snowystinger snowystinger added the good first issue Good for newcomers label Apr 22, 2024
@CHE1RON
Copy link
Contributor

CHE1RON commented Jun 3, 2024 •
edited
Loading

As outlined in #6481, I think this is a very important issue, as this would be universally applicable & areas of application are manifold. The Dialog modal component is perfect for submitting any kind of form data, and as @undavide pointed out, the great default design should not be compromised in order to achieve something like that - up to now, I put ButtonGroup inside Content and added the margin etc myself, having to integrate Footer manually, and well .. sigh

Beware though that we'd need a solution which takes into account not only Content, but also eg Footer (see the checkbox in OP's example) 🙏

@github-project-automation github-project-automation bot moved this to ✏️ To Groom in RSP Component Milestones Oct 24, 2024
@LFDanLu LFDanLu moved this from ✏️ To Groom to 📋 Waiting for Sprint in RSP Component Milestones Oct 30, 2024
@suyash5053 suyash5053 linked a pull request Mar 7, 2025 that will close this issue
Open
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request good first issue Good for newcomers rsp:Button rsp:Form
Projects
RSP Component Milestones
Status: 📋 Waiting for Sprint
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Feat: Form attribute of button with type submit suyash5053/react-spectrum
10 participants
@tchak @devongovett @donaldr @snowystinger @dmbaughman @undavide @razvanip @LFDanLu @Spooky-0 @CHE1RON