Skip to content

[Modal]: Use of Modal with Formik makes secondary button require a double click #9523

@JohnWColby

Description

@JohnWColby

What package(s) are you using?

  • carbon-components
  • carbon-components-react

Detailed description

We have recently been updating to the latest Carbon package versions, and it broke some of our integration tests. Our updates are as follows:
carbon-components: 10.23.2 => 10.40.2
carbon-components-react: 7.23.2 => 7.40.2

Upon investigation, we found that some of our Modals now require double clicking the secondary button before its event is triggered. Upon further testing, it seems to be related to the use of Formik in our application.

We have been able to determine that this behavior only exists in Carbon starting in versions 10.29.0 and 7.29.0 of carbon-components and carbon-components-react, respectively. This PR from that release seems to be the most likely culprit. (I believe the only other change to Modal for this release occurred here, which was then overridden by #7775.)

Steps to reproduce the issue

I was able to create a simple CodeSandbox with barebones use of Formik which results in the behavior we're seeing: https://codesandbox.io/s/carbon-react-modal-formik-bug-2bho4

  • Note that single clicking the Cancel secondary button does not result in the onSecondarySubmit function triggering. This function only triggers on the second or subsequent clicks. The first click also results in a console error which looks similar to the following: Uncaught Error: Cannot remove node 11 because no matching node was found in the Store.
  • Note that the CodeSandbox uses versions 10.29.0 for carbon-components and 7.29.0 for carbon-components-react, as these are the first versions in which this bug is present. Note that the bug no longer occurs if these versions are adjusted to 10.28.0 and 7.28.0, respectively. Also note that the bug still exists when using the latest versions of carbon-components and carbon-components-react.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions