[Checkbox issue]: [Issue in checkbox on signup page]

[cerdo03]

Observed behavior

In the "Where do you plan to use Kolibri Studio? (check all that apply)*" section, whenever before choosing any location, I search a country let us say India, and I check it, and I search another country after that, then the checkbox remains always be checked at that position, irrespective of the country name in front of the checkbox. I am attaching a video for better understanding.

Expected behavior

Only the checkbox that the user has selected should remain selected.

User-facing consequences

The UI and UX experience doesn't seem good because of this issue. There could be confusion on the countries that they are checking.

Additional information

video link: https://drive.google.com/file/d/1bMrtsEMqxtxuBB7iFaK3HgvHJalBZyLr/view?usp=sharing

Steps to reproduce the issue

1. On the login page, click on create an account CTA.
2. Fill in all details on the signup page.
3. For the "Where do you plan to use Kolibri Studio? (check all that apply)*", search India, and check the checkbox.
4. Now search another country, and you will notice the position of the checkbox that you clicked will remain checked irrespective of the country name infront of it.

Usage Details

• OS: MacOs
• Browser: Chrome
• URL: http://localhost:8080/en/accounts/#/create
• Other information that may be relevant:

[cerdo03]

Hi @marcellamaki @bjester ,
If this issue seems beginner friendly, can I work on this issue?

[MisRob]

Hi @cerdo03, thank you for the report and volunteering. You're welcome to investigate and resolve the bug.

[cerdo03]

@MisRob I tried to fix this and found a possible solution of adding a key parameter to VAutocomplete and updating it whenever any checkbox is clicked. This fixes the issue but the dropdown closes whenever any checkbox is clicked. Then to select any other country user has to open the dropdown again. So is this acceptable or should I try to find some other solution to the problem? I am not able to find any other way other than rendering the checkboxes manually without VAutocomplete. If you have any solution in mind, please feel free to share it . Path of the file which affects this issue: https://github.com/learningequality/studio/blob/525b7db58e909cf060528ef29ec616e98407fa01/contentcuration/contentcuration/frontend/shared/views/form/CountryField.vue

[MisRob]

Thank you for looking into this @cerdo03. Have you located what's the source of the original problem? It's not clear to me whether you think this is caused by VAutocomplete internal logic or if it could be possibly caused by the way we handle data that we're sending down to VAutocomplete. I think it'd be helpful to know a bit more about the place that's broken, if possible.

[bjester]

Does it still close when you remove @change="searchInput = ''"?

[cerdo03]

@bjester Yeah it closes even when @change="searchInput = ''" is removed. This is because when the key is updated the component re-renders and thus it gets closed.

[cerdo03]

@MisRob @bjester I think this is happening because of internal logic of VAutocomplete and asyncho@change="searchInput = ''" works. One thing that I noted here was that the issue doesn't happen when I first select a particular checkbox and then search another country. This only happens when I search a country first and click on checkbox of one of the search results.

I think this probably because of the asynchronous nature. Because on adding a setTimeout of just 1 ms, the issue doesn't happen. If this is acceptable, then maybe we can introduce a setTimeout of 1ms, this doesn't hamper the user experience as the time interval of 1ms is negligible.

[MisRob]

Because on adding a setTimeout of just 1 ms, the issue doesn't happen. If this is acceptable, then maybe we can introduce a setTimeout of 1ms, this doesn't hamper the user experience as the time interval of 1ms is negligible.

@cerdo03 Thanks for looking into it more. 1ms timeout sounds good to me.