[Enhancement] - Enable the use of Enter keys for modals

[leekahung]

Describe the Current Behavior/Feature:

More related to Quality of Life changes as oppose to make the functions work.

While we have functioning modals doing what we want them to be doing, the submission of these modals are relegated to simply clicks. If there could be a way to simply perform the same action, but with the enter key, that would be nice. This type of change would be ideal for modals which only rely on buttons and doesn't have any textfields/input fields involved.

For example, if user wishes to log out, they could simply hit the "enter" key when the logout modal pops up as an alternative to clicking.

Or if we wish to push this further, we could also get these enhancements to work with modals with textfields/input fields, we could have the "enter" key work after the user exited the fields.

Rationale:

Ease of actions that would augment what we have with mouse presses.

Proposed Implementation (if applicable):

Include a listener when entering modals that would help perform actions with return.

Additional context:

Initially have this enhancement in mind for modals like the logout and inactivity message (see screenshot):

But could be expanded to other modal like add contacts or new message if it's something we think would be useful.

[JonnyMc94]

Hi @leekahung, I would like to work on this solution for the Logout and Inactivity modals if possible?

[leekahung]

Hi @leekahung, I would like to work on this solution for the Logout and Inactivity modals if possible?

Sure, give it a go.

[xscottxbrownx]

@leekahung @JonnyMc94
The ESC key already works by default with MUI.

Enter key works when focused on the button desired. I guess we could autofocus on buttons when modal appears, if that made sense - like Logout modal...

Could make modal functions fire on Enter key press when in text fields as an approach as well - I haven't tested to see if this is already working or not.

[leekahung]

@leekahung @JonnyMc94
The ESC key already works by default with MUI.

Enter key works when focused on the button desired. I guess we could autofocus on buttons when modal appears, if that made sense - like Logout modal...

Could make modal functions fire on Enter key press when in text fields as an approach as well - I haven't tested to see if this is already working or not.

We got the enter key press working for the pod server input field, so I think we could try a similar strategy

[xscottxbrownx]

We got the enter key press working for the pod server input field, so I think we could try a similar strategy

The field on login page? That doesn't work for me. Or am I thinking of the wrong thing?

The enter key works just fine on the Add Contacts modal, and also Add Documents. Although Add Documents is a little strange because you have to have chosen a file to upload first & if you hit enter on SelectDocumentType it doesn't really work due to it being a select menu - it causes the dropdown to open/close. But if you were on any other input it would work - see video:

https://github.com/codeforpdx/PASS/assets/71395931/8c127419-763e-4fe7-b857-79f8bf79245c

Enter key also works fine on Sharing a document modal - SetACLPermissionsModal.

So seems: 1) esc key works on all I tested (may have missed one possibly) 2) enter key works on all modals that contain a <form>, but not just the <Dialog> modals with one (typically the single question yes/no dialogs.) 3) could be solved with an autofocus on the "yes" action of the <Dialog> modals

@leekahung does that sound like an okay approach? Or did you have something else in mind?

[leekahung]

The field on login page? That doesn't work for me. Or am I thinking of the wrong thing?

No, I think you're right about the Enter key no longer working anymore. It had worked before (see PR https://github.com/codeforpdx/PASS/pull/340), but was think it might have broke from our recent update from the original input field to MUI <Autocomplete>. In any case:

1. esc key works on all I tested (may have missed one possibly)
2. enter key works on all modals that contain a <form>, but not just the <Dialog> modals with one (typically the single question yes/no dialogs.)
3. could be solved with an autofocus on the "yes" action of the <Dialog> modals

@leekahung does that sound like an okay approach? Or did you have something else in mind?

I like the idea with the auto-focus upon enter the modal. Though, I'm not sure if auto-focusing on the button would require users to hit ESC twice, once to de-focus the button, twice to exit the modal. I'll say we should give it.

For now, I'll update this issue to simply enabling Enter key. With this approach, think we could also patch up the new login on Enter key bug along the way.

[JonnyMc94]

Hi @leekahung. Just to confirm, this enhancement is now related to enabling the enter key for the logout, inactivity and login modals?

[leekahung]

Hi @leekahung. Just to confirm, this enhancement is now related to enabling the enter key for the logout, inactivity and login modals?

Yes. A good bonus would be to enable the enter key for all modal, including the ones that has input fields or text fields in them.

[andycwilliams]

@JonnyMc94 Are you working on this? If so, feel free to assign yourself to it.

[JonnyMc94]

Hi @andycwilliams, yes I'm currently working on this. It looks like I can't assign myself?

[andycwilliams]

Ah, it may be because you're a contributor and not technically a member of the GitHub group. Anyway I assigned you.

[JonnyMc94]

Apologies for the lack of movement on this guys. I have changes I'm currently working on and hope to have them pushed in the next few days.

[andycwilliams]

Apologies for the lack of movement on this guys. I have changes I'm currently working on and hope to have them pushed in the next few days.

It's alright. A couple of weeks isn't an enormous amount of time with no movement. Besides, it's the holiday season so things are a bit slower overall.

[xscottxbrownx]

@JonnyMc94 still working on this?

[JonnyMc94]

@xscottxbrownx I did some work on this over the holidays but was having issues. I couldn't get the focus on the submit button when the modal opened. I worked around this by placing an event listener on the modal itself. This worked but unfortunately then ran into a bug with executing functionality on modal close e.g logging out, submitting form content/alerting user of empty required form content. It may need a more experienced hand than mine so if anyone else wants to work on it feel free!

[andycwilliams]

@JonnyMc94 Any progress?

[andycwilliams]

@JonnyMc94 Once again seeing if you have any updates

[andycwilliams]

Unassigning due to lack of response