runtime warning on AvRadioGroup when there are more than three options

[rtriebwasser]

When there are three or more AvRadio components inside AvRadioGroup and the Modal is dismissed/hidden, the following runtime warning is given:

react-dom.development.js:506 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. in AvRadioGroup (created by ResponseSection) in div (created by Col) in Col (created by ResponseSection) in div (created by Row) in Row (created by ResponseSection) in div (created by ResponseSection) in div (created by ResponseSection) in ResponseSection (created by CaCheck) in form (created by Form) in Form (created by AvForm) in AvForm (created by CaCheck) in div (created by ModalBody) in ModalBody (created by CaCheck) in div (created by Modal) in div (created by Modal) in div (created by Transition) in Transition (created by Fade) in Fade (created by Modal) in div (created by Modal) in Portal (created by Modal)

This happens in Chrome with availity-reactstrap-validation 2.5.2 react 16.5.2 reactstrap 6.5.0

[GoPro16]

Try installing the latest version. Possibly fixed via #144

[tuok]

@rtriebwasser Did you manage to solve this? I'm facing same kind of problem with version 2.6.0. I have AvForm on modal component and if I submit form and close modal, I get same kind of warning. For me though, it isn't related to radio buttons but the AvForm itself.

Versions: availity-reactstrap-validation 2.6.0 react 16.8.5 reactstrap 8.0.1

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in AvForm (created by UserEditModal)
    in div (created by Context.Consumer)
    in TabPane (created by UserEditModal)
    in div (created by TabContent)
    in TabContent (created by UserEditModal)
    in div (created by ModalBody)
    in ModalBody (created by UserEditModal)
    in div (created by Modal)
    in div (created by Modal)
    in div (created by Transition)
    in Transition (created by Fade)
    in Fade (created by Modal)
    in div (created by Modal)
    in Portal (created by Modal)

[GoPro16]

Could you maybe post a quick codesandbox of that? We have a similar feedback component in our react mono repo that does that but we recently switched to one of our newly built form libs

[tuok]

I couldn't reproduce the bug in codesandbox and for some magical reason the original problem in my code also vanished. I'm a bit astonished and happy at the same time. Will get back if the problem still persists. 😁

[tuok]

I managed to reproduce the situation again locally. Still struggling to do the same in codesandbox, but here are some remarks:

• Warning only appears if AvField on the AvForm is invalid and I close the modal (which contains AvForm, which eventually contains AvField). For example when field is marked as required, but is left empty.
• After warning has appeared, if I do not reload the page and open the modal again and close it, no further warnings appear.
• I've got onClick event handler on AvField, which currently contains dummy lambda: () => {}. This way the warning appears, but if I remove the onClick prop, warning doesn't appear.

Here's my two cents, I don't know if any of these are helpful, but something funny is definitely going on. I think I have to focus now on other things, but will update this if I manage to isolate this further.