Facility Import Admin Credentials Modal - [Enter] does not submit form

[nucleogenesis]

Observed behavior

When importing a Facility as a Super Admin, I select the Facility that I want to import. I am asked to enter admin credentials (for the server to be imported). When I finish entering my password and hit [Enter] nothing happens. I must tab two more times to the "Continue" button to submit the form.

Expected behavior

A form should be submitted, if able, when the user hits [Enter]. If the user cannot submit the form, then they should be notified of the errors preventing submission.

User-facing consequences

Confusing UI

Steps to reproduce

Import a Facility as Super Admin.

Context

develop Linux Chromium

[AllanOXDi]

Hi @nucleogenesis , Had you used the tab key as well to enter the password and username? I have tried entering the username and password without tabbing and clicking out of the input fields and pressing Enter key the continue button seems to work. However , I realized that this happens when you are still on the password input, which requires pressing the tab key twice to reach the continue button. I do not think skipping the tab order would be a good approach ?

[nucleogenesis]

@AllanOXDi Whenever you're in a form and hit Enter I believe the expectation is that we submit that form - @jtamiace @radinamatic is this correct generally?

The user shouldn't have to tab to the Submit/Continue button ya?

[shruti862]

Hey @nucleogenesis @MisRob , I’m interested in working on this issue and would appreciate it if you could assign it to me. Additionally, could you please guide me on how to reproduce the issue?

[AlexVelezLl]

Hey @shruti862! Thanks for your interest in contributing to LE! I will assign you this issue.

To reproduce this issue, you can run another Kolibri server (guides here), and set up a new facility there. Then in your dev server, you can import that facility like this. The modal this issue is talking about is this one (you can find how to get to it in the previous docs):

[shruti862]

Hey @AlexVelezLl, just a quick update—I was able to reproduce the issue locally. It seems that pressing Enter while still in the input field does not submit the form, but clicking outside the field and then pressing Enter does trigger submission. I haven’t yet identified the cause in the code, but I’ll be investigating further. Any insights in the meantime would be greatly appreciated. Thanks!

[MisRob]

Thanks @shruti862, yest it'd be great if you could investigate further. Good to hear you were able to reproduce it!

[MisRob]

@shruti862 I don't know if this issue is coming from KDS or Kolibri, but here's related KDS components

• https://github.com/learningequality/kolibri-design-system/blob/develop/lib/KModal.vue
• https://github.com/learningequality/kolibri-design-system/tree/develop/lib/KTextbox

One thing to try out would be if it's a general issue that happens any time KTextbox is used within KModal. Then this fix would need to be done in the KDS repository. You could easily try out this on the KDS dev playground

[shruti862]

@MisRob Thanks for the suggestions and references! :)

[shruti862]

Hey @MisRob, I tested the issue by using KTextBox within KModal in the playground, and it appears to be a general issue. Could you please guide me on the next steps to resolve this?

https://github.com/user-attachments/assets/bb65d0e7-71cd-4607-8fb4-5ba74be07413

[MisRob]

Hi @shruti862, thanks for confirming. The next step would be to fix this in the KDS repository.

[shruti862]

Hey @MisRob , just wanted to know do I need to modify the KTextbox Or KModal components in KDS repo to resolve this issue?

[MisRob]

I don't know - I think we will understand it better after you have located the exact source of the issue @shruti862. You can mention it in the comments as soon as you found it or feel free to suggest some options to resolve it as well.

[shruti862]

Hey @MisRob @AlexVelezLl , I have opened a PR for this issue ,please have a look whenever you get time :)

[MisRob]

Wonderful, thank you @shruti862

[MisRob]

@shruti862 by any chance have you noticed if this is an issue in other Kolibri forms?

[MisRob]

Closed by https://github.com/learningequality/kolibri/pull/13090

[shruti862]

Hey @MisRob , I haven’t checked other Kolibri forms for this issue yet, but I’ll look into it and update you soon!

[shruti862]

Hey @MisRob , all the other kolibri forms are working as expected :)

[MisRob]

@shruti862 Good news! We just need to be careful to not forget to add handlers in the future forms it seems. Thanks a lot for the fix.