SelectableBox component not selectable

[jesperhodge]

Bugs

Summary:

Our (2U - TNL) update of course-authoring to openedx/21.5.7 version of paragon caused a bug where selectableboxes were not clickable or selectable. This occurred on our stage server and is very hard to reproduce locally, but looks to be tied to the paragon component since it only happens in the newer version and affects every place the component is used. See the video attached.

Environment:

stage/presumably prod, extremely difficult to reproduce locally.

Scope:

Presumably a general bug unless we missed a breaking change.
Observed in course-authoring SortAndFilterModal and frontend-lib-content-components ProblemTypeSelect components.

Versions:

21.5.7 -> latest
The bug occurs first in the openedx/21.5.7 version and does not occur in earlier versions like edx/21.5.6

Details:

I found that the value property in the FormRadioSetContext never changes in our stage environment. This suggests that something is not working related to the onChange function call that originates from an invisible input (display: none) wrapped in a SelectableBox. The onChange function should change this value but doesn't. Now one possible explanation is that the change handler on the element isn't triggered, of course. One thing I tried is to add a change event listener via the browser console to this input and then trigger it by clicking on it. This succeeded and didn't show a problem.

Usage in our codebase:

https://github.com/openedx/frontend-lib-content-components/blob/main/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/ProblemTypeSelect.jsx

Screen.Recording.2024-02-29.at.11.43.02.AM.mov

Related issues

Tasks

Beta Give feedback

1. SelectableBox component not selectable frontend-app-course-authoring#891
   bug +1
2. SelectableBox component not selectable frontend-lib-content-components#464
   bug +1

[jesperhodge]

We found out that actually also type="checkbox" components are affected. I updated the description above accordingly.

[arbrandes]

@jesperhodge, thank you for the comprehensive bug report. I took the liberty of creating two sub-issues (openedx/frontend-app-course-authoring#891 and openedx/frontend-lib-content-components#464), one for each repository that has been known to be affected, so we can track this problem to its conclusion.

I have to ask: since you seem to be the one with the most knowledge about the problem as of now, would you be interested in submitting a fix to Paragon? We can then tackle the removal of the override from the rest of the codebase.

[jesperhodge]

Hi @arbrandes , thanks a lot. The two issues are very helpful as they track the multiple PRs that were related.

I'll be able to spend a little time on trying to fix this in paragon, so I'll try that - within the next week or two - unless there's any urgent bug that pulls me away. If the problem isn't solvable in 1-2 days of effort we'll need to set aside TNL capacity for it and that can take a while.

[arbrandes]

Understood, and thanks! Let me know if you'll be able to work on it, either way.

[jesperhodge]

Update that we don't have any capacity for this at the moment, and thus I cannot take on this task.

[Yagnesh1998]

Hi, I'm just figuring out this bug. I'm working on v17.0.3 which just came out. This version came out a week ago but everything is working fine.

And the version below is Paragon right? I assume it's old

21.5.7 -> latest
The bug occurs first in the openedx/21.5.7 version and does not occur in earlier versions like edx/21.5.6

Untitled.design.1.mp4

[jesperhodge]

Hi @Yagnesh1998 , thanks so much for looking into this. So the problem is that this error is extremely hard to reproduce and only occurs in some very specific circumstances. I spent a lot of time trying to reproduce it.
Mostly it only occurred in our stage environment in multiple paragon components as soon as the version was updated.
However I was able to partially reproduce it locally. But I had to literally copy-paste the code of the paragon component from 21.5.7 into a folder in the frontend-lib-content-components or frontend-app-course-authoring projects and then run that, and then I got the error. However I was able to fix it locally but then on our stage, again, only the display part was fixed but the value was still not selectable.
So something happens between 21.5.6 and 21.5.7. The best bet is to look at the code diff.
It could be a CSS problem where for some very obscure reason the html element is not clickable.
The observation about it I made was the input in the SelectableBox should trigger a change event which should call a function that should change a value in a React context, but it doesn't.

Hi, I'm just figuring out this bug. I'm working on v17.0.3 which just came out. This version came out a week ago but everything is working fine.

I find this very confusing. The latest npm version of paragon is 22.2.1 from 2 days ago. And when it occurred, I definitely had observed the bug also on a recent paragon 22 version, though I don't remember which one it was. https://www.npmjs.com/package/@openedx/paragon

[jesperhodge]

It's quite possible that the problem only occurs in course-authoring, of course and is caused by some conflicts concerning course-authoring CSS or some other stuff that are only triggered by a change made in paragon 21.5.7. I doubt that it's 2U-specific though since I disabled the edx-brand css I believe when I tested, and it occurred locally in every single component that used the SelectableBox, but only from 21.5.7 onwards.

If you have any trouble getting the diff to the 21.5.6 version - especially since it went along with this shift from @edx/paragon to @openedx/paragon - just send me a mention. (By the way I respond much more quickly to slack messages in openedx slack, if that helps.)

[brian-smith-tcril]

The changes between v21.5.6 and v21.5.7 seem to only be related to the namespace change (and a minor optimization on the GitHub actions workflow)

v21.5.6...v21.5.7

That makes me think there may be something namespace related happening on the consuming application side?