Repository navigation
[Checkbox issue]: [Issue in checkbox on signup page] #4352
Description
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
- On the login page, click on create an account CTA.
- Fill in all details on the signup page.
- For the "Where do you plan to use Kolibri Studio? (check all that apply)*", search India, and check the checkbox.
- 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:
Metadata
Metadata
Assignees
Labels
No labels
Activity
cerdo03 commentedon Dec 8, 2023
Hi @marcellamaki @bjester ,
If this issue seems beginner friendly, can I work on this issue?
MisRob commentedon Dec 12, 2023
Hi @cerdo03, thank you for the report and volunteering. You're welcome to investigate and resolve the bug.
cerdo03 commentedon Dec 12, 2023
@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 commentedon Dec 13, 2023
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
VAutocompleteinternal logic or if it could be possibly caused by the way we handle data that we're sending down toVAutocomplete. I think it'd be helpful to know a bit more about the place that's broken, if possible.bjester commentedon Dec 13, 2023
Does it still close when you remove
@change="searchInput = ''"?cerdo03 commentedon Dec 13, 2023
@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 commentedon Dec 14, 2023
@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
setTimeoutof 1ms, this doesn't hamper the user experience as the time interval of 1ms is negligible.MisRob commentedon Dec 15, 2023
@cerdo03 Thanks for looking into it more. 1ms timeout sounds good to me.