0

I have a react app, and when I was pressing enter it was triggering a hidden button, rather than the button that was showed. So I set it to disabled if hidden.

But the problem now is that "on enter" nothing happens when that button is disabled. I imagine the default behaviour is to still try to trigger the closest button on the page (regardless of if it's disabled or not).

Is there a way to alter this behaviour, or a different attribute (other than / side by side) the disabled attribute.

I know this can be done instead:

How to trigger a button click on Enter in React

But I would prefer a cleaner way to monitoring which button should be triggered on enter at a specific time

Kieran
  • 612
  • 6
  • 22
  • I think you need to give us more context. How was the hidden button being triggered? Did it have an `onkeypress` listener attached to it? If so, how is it different from the article you linked? Also, what do you mean by 'which button should be triggered on enter at a specific time'? Do you need to invoke different button clicks depending on user state? Please specify. – cSharp Apr 11 '22 at 01:36
  • I don't have an onkeypress, it's default behaviour. I just pressed enter and it triggered a button I have on the page. But that button was hidden at that time, so I didn't want that to happen. So I disabled it so that wouldn't happen. But then enter did nothing (instead of triggering the other button) – Kieran Apr 11 '22 at 13:15
  • By this 'which button should be triggered on enter at a specific time' I mean, if button a is hidden, don't trigger it. trigger the only viewable button. – Kieran Apr 11 '22 at 13:16
  • I have an input field above the two buttons. I was pressing enter from there. This also has no onkeypress – Kieran Apr 11 '22 at 13:20
  • Pressing `Enter` anywhere on the page does not trigger `onclick` of a button by default, however, if the button is inside a `form`, and the user is `focused` within the form. [You can see the above behaviour here](https://codepen.io/c_sharp_/pen/dyJjJoo). Pressing `Enter` while focused on the first `input` does not trigger the first `button`, but doing so while focused on the second `input` triggers the second `button`. – cSharp Apr 11 '22 at 23:14
  • My situation is two buttons inside a form. The input is focused and enter is pressed. but the first button is hidden and disabled. How to make it trigger the second button? – Kieran Apr 12 '22 at 09:44
  • example: https://codepen.io/Kieran95/pen/ZEvjqXW – Kieran Apr 12 '22 at 09:46
  • In the codepen link you gave, I'm getting different behaviours depending on the browser. `Button 3` gets clicked in Safari, and no button gets clicked in Chrome. Will [this thread](https://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box) help you solve your case? – cSharp Apr 12 '22 at 23:33
  • I think I found the answer for me: https://stackoverflow.com/a/65167557/6217413. Thank you for your help – Kieran Apr 13 '22 at 09:32

0 Answers0