Blueprint: How to make enter to click submit on a form

[zhaoyi0113]

I am using form control component to create a Form panel and I want to click the submit button when users type a enter. How can I do that in blueprintjs?

[tgreenwatts]

I believe you can just add type="submit" to your enter button. Does that not work for you?

[giladgray]

yes you must explicitly declare <Button type="submit" ...>

[zhaoyi0113]

add 'type="submit"' doesn't work. In addition, this type break some css styling on <AnchorButton>. Look at below screen shot. The connect button style is broken when I add type="submit" on it. And click enter doesn't trigger the build clicking event.

Below is my code:

<form>
<div className="profile-button-panel">
            <AnchorButton
              className="pt-button pt-intent-success"
              onClick={form.onSubmit}
              text="Connect"
              type="submit"
              disabled={formErrors.length > 0}
              loading={this.state.connecting}
            />
            <AnchorButton
              className="pt-button pt-intent-primary"
              onClick={form.onReset}
              text="Reset"
            />
            <AnchorButton
              className="pt-button pt-intent-primary"
              onClick={form.onTest.bind(form)}
              text="Test"
              disabled={formErrors.length > 0}
              loading={this.state.testing}
            />
            <AnchorButton
              className="pt-button pt-intent-primary"
              text='Close'
              onClick={this.props.close}
            />
          </div>
        </form>

[llorca]

Anchors don't accept type="submit". Use <Button> instead

[zhaoyi0113]

The reason I am using AnchorButton is that I want to wrap it inside a <Tooltip> like below. I can't do it on a Button.

<Tooltip
              intent={Intent.PRIMARY}
              hoverOpenDelay={1000}
              content="Execute Selected Commands"
              tooltipClassName="pt-dark"
              position={Position.BOTTOM}>
              <AnchorButton
                onClick={this.executeLine}
            </Tooltip>

[llorca]

Why can't you? This is working fine on my end:

<Tooltip
    content="This button also has a popover!"
    inline={true}
    position={Position.RIGHT}
>
    <Button
        iconName="refresh"
        intent={Intent.SUCCESS}
        type="submit"
        text="Hover and click me"
    />
</Tooltip>

[adidahiya]

@zhaoyi0113 you can't make anchor elements submit forms. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

[zhaoyi0113]

@llorca Just tried and it works fine for Button. I might make a mistake. Thanks for your code.

[colinmegill]

@giladgray I've run into a similar problem:

              <FormGroup
                helperText="Do something"
                labelFor="id1"
              >
                <ControlGroup>
                  <InputGroup
                    onChange={e => {
                      this.setState({ bar: e.target.value });
                    }}
                    id="id1"
                    placeholder="foo"
                    value={bar}
                  />
                  <Button
                    type="submit"
                    onClick={this.handleBulkAddClick.bind(this)}
                  >
                    Add
                  </Button>
                </ControlGroup>
              </FormGroup>

Clicking the button works, hitting enter does not - should it? Hitting enter does work in the Suggest component in the same render method. This is probably something silly I'm missing, rather than an error in Blueprint...

Thanks!

Blueprint 3.8.0

[giladgray]

@colinmegill you need to wrap the whole thing in a <form> tag for this behavior to work -- that's the guy who makes it all happen.

[colinmegill]

Duh! Thank you. Should have checked the code, I figured that was rendered inside of the form group. Thanks for a prompt reply!

[giladgray]

👍 FormGroup is for grouping inside a form, not the form tag itself. One form = several form groups

[colinmegill]

For posterity:

              <form
                onSubmit={e => {
                  e.preventDefault();
                  this.sameHandlerAsButton();
                }}
              >

[hillcjames]

Just to add a reminder here on why you may need an AnchorButton: Tooltips don't really work on disabled Buttons, at least in Chrome, but work fine on AnchorButtons. So if you don't need to (manually?) disable your submit button, Buttons should be fine.

https://github.com/palantir/blueprint/issues/1591
https://blueprintjs.com/docs/#core/components/tooltip

[sinharaksh1t]

@hillcjames that's right. However, what if you wanted to manually disable your submit button and still want the same kinda behavior? Any suggestions for that?

[adidahiya]

@sinharaksh1t <AnchorButton disabled={true}>

[sinharaksh1t]

@adidahiya - not sure if this is intentional or a bug, but disabled <AnchorButtons /> still call their onClick functions. Is this expected behavior?

[adidahiya]

@sinharaksh1t I'm not sure if we really considered it too much, but I think the current behavior isn't particularly wrong... since you're supplying the disabled prop yourself, you can act accordingly in the onClick handler.

[sinharaksh1t]

@adidahiya correct, that's exactly how I'm dealing with this unusual behavior. And I'm not sure if this is really right or wrong but imho if a button is ever disabled, it should probably not be clickable. I'm not too familiar with the code base, but I'm super inquisitive to dive in deeper. I'm interested in working to make disabled AnchorButtons unclickable. Do you guys welcome PRs? :)

[adidahiya]

@sinharaksh1t yes we accept PRs (mostly for the issues marked with the "help wanted" label) but I don't think we need to change the behavior here (it would be a slightly breaking change without much benefit).

[sinharaksh1t]

@adidahiya Ah ok no worries! Thanks for your input.