Button prevent Enter

[maxime700]

Environment

• Package version(s): 3.51.3
• Browser and OS versions: all

Question

Hello,

I need some help with button component

Is there a way to prevent enter key press to execute click action?

  <Button onClick={this.onAdd}/>

With the simple code above, when I click on my button then press enter onAdd is executed twice. First time after the click, second time after pressing enter.

According to the following code present in abstractButton.tsx file, i would say it's not possible, isn't it?

    protected handleKeyUp = (e: React.KeyboardEvent<any>) => {
        // HACKHACK: https://github.com/palantir/blueprint/issues/4165
        /* eslint-disable deprecation/deprecation */
        if (Keys.isKeyboardClick(e.which)) {
            this.setState({ isActive: false });
            this.buttonRef?.click();
        }
        this.currentKeyDown = undefined;
        this.props.onKeyUp?.(e);
    };

Thanks for you help.

Maxime

[adidahiya]

A click and then an Enter keypress seems like an interaction that should trigger the button handler twice.

But if you want to only handle the click event in this.onAdd, then you can inspect the event argument in the onClick callback. If it's a keypress rather than a click event, ignore it in your handler.

[maxime700]

Hello Adi,

Thanks for your help.

You are right about the interaction that should trigger the button handler twice.
It's just that my button is in a dialog and mys customer wants that enter keypress to close de dialog. This is why a want to only handle the click event.

I thought of this solution however the event I receive in this.onAdd when I press Enter is of type click because it is launch by the following line:

this.buttonRef?.click();

Is this correct or do I misunderstand?

Maxime

[adidahiya]

Ah sorry, yes, it will be a click event when pressing Enter as well because we programmatically call .click(). But there's probably some event info that's different in this click vs. other user-initiated clicks from mouse interactions. Try to inspect the event in the two cases and see if you can discriminate between them to handle the interactions differently.