Add adjust label hook for radio and checkbox (#1398, #1406)

[jochenklar]

No description provided.

[MyPyDavid]

the padding of the buttons seems good, but what about the overflow for really long texts? 🙃

[MyPyDavid]

when I go in the test Catalog to Options>Radio it breaks (independent of text).
The question in Collections>Radio buttons works fine.

Uncaught TypeError: can't access property "style", label is null
    useAdjustLabel webpack://rdmo/./rdmo/projects/assets/js/interview/hooks/useAdjustLabel.js?:17
    React 16
    Redux 3
    batchedUpdates$1 React
    Redux 7
    fetchValues webpack://rdmo/./rdmo/projects/assets/js/interview/actions/interviewActions.js?:235
    promise callback*fetchValues/< webpack://rdmo/./rdmo/projects/assets/js/interview/actions/interviewActions.js?:231
    Redux 2
    fetchPage webpack://rdmo/./rdmo/projects/assets/js/interview/actions/interviewActions.js?:119
    promise callback*fetchPage/< webpack://rdmo/./rdmo/projects/assets/js/interview/actions/interviewActions.js?:115
    Redux 2
    onClick webpack://rdmo/./rdmo/projects/assets/js/interview/components/sidebar/Navigation.js?:49
    handleClick webpack://rdmo/./rdmo/projects/assets/js/interview/components/sidebar/NavigationLink.js?:18
    React 23
    <anonymous> webpack://rdmo/./rdmo/projects/assets/js/interview.js?:27
    js http://localhost:8000/static/projects/js/interview.js:6115
    __webpack_require__ http://localhost:8000/static/projects/js/interview.js:7228
    <anonymous> http://localhost:8000/static/projects/js/interview.js:7304
    <anonymous> http://localhost:8000/static/projects/js/interview.js:7307
interview.js line 7050 > eval:17:7

The above error occurred in the <RadioInput> component:

RadioInput@webpack://rdmo/./rdmo/projects/assets/js/interview/components/main/widget/RadioInput.js?:34:18
div
div
RadioWidget@webpack://rdmo/./rdmo/projects/assets/js/interview/components/main/widget/RadioWidget.js?:34:14
QuestionWidget@webpack://rdmo/./rdmo/projects/assets/js/interview/components/main/question/QuestionWidget.js?:31:11
div
Question@webpack://rdmo/./rdmo/projects/assets/js/interview/components/main/question/Question.js?:32:16
div
div
Page@webpack://rdmo/./rdmo/projects/assets/js/interview/components/main/page/Page.js?:30:16
div
Main@webpack://r

[jochenklar]

Hi @MyPyDavid , thanks for testing. I think we should not try to fix the non breaking of the long word, we will change to a flexbox layout eventually (with Bootstrap 5.3). I don't think it will happen in real live (maybe on very small phones). The other problem (and more) should be fixed with the last commit.

[MyPyDavid]

with using the useState for the additional input I think I've fixed this error from occurring.

• when typing normal and checking the checkbox just before the autosave leads to STORE_VALUE_ERROR

XHRPOST
http://localhost:8000/api/v1/projects/projects/18/values/
[HTTP/1.1 400 Bad Request 115ms]

conflict [ "An existing value for this attribute/set_prefix/set_index/collection_index was found." ]

btw. the state could also make the additional input re-appear again after unchecking/checking but I've cleared it for now.

[MyPyDavid]

Thanks looks good to me! I've added the small change with the useState for additional input.

[MyPyDavid]

so useState should not be used here? Instead clicking of the checkbox and the additional input could be coupled somewhere in the reducers somehow?

[jochenklar]

Ok, I added a hook and moved the additionalInput state to the parent component. Since CheckboxInput is for one option, but RadioInput for multiple, this state needs to be and object for each option. The alternative would be to add a RadioInputOption component, but I think it is ok now. The question: does it work? (It seems to work, but please test.)

[MyPyDavid]

thanks, that looks and behaves much better! (I can still break it by spamming the checkbox but that aside.)

I've found another thing. "Erase input" does not clear the text of the additional inputs?!

[MyPyDavid]

that fixes it!

[jochenklar]

@MyPyDavid now you should be able to click manicly and not get an error 🤞 .

[MyPyDavid]

yes, I can't break it anymore! 😥