Toggle does not function when user clicks outside of the modal

[wpdarren]

Bug Description

Reported by @kelvinballoo on the Asana bug bash board.

When the user clicks on the toggle to disable the Enhanced conversion tracking. Rather than clicking on 'Disable' nor 'Cancel' the user clicks outside the modal, the toggle gets stuck and you are not able to toggle on and off.

Video of the issue can be found here

Disabled.toggled.after.no.disabling.mov

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• After clicking on the Enhanced conversion tracking toggle, then clicking outside the modal to close it, it should behave the same as clicking on cancel button - toggle should trigger the modal again after clicking on it

Implementation Brief

• Update assets/js/components/ModalDialog.js
  • Add onClose prop to the Dialog component and pass it handleDialog callback (already passed as a prop to the main ModalDialog component)

Test Coverage

• No updates needed

QA Brief

• Setup Site Kit
• Connect and setup Ads module. Then go to edit settings of Ads module
• Enable the enhanced conversion tracking and save it
• Then click on it to disable it, after modal pops up, click outside of it
• Once it is closed, click on the toggle again, it should trigger the popup again

Changelog entry

• Fix the toggle issue that happened when the user closed the popup dialog for enhanced conversion tracking by clicking somewhere outside of the popup.

[eugene-manuilov]

IB ✔️

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Verified that issue is resolve now and toggle functional now when user clicks outside of the modal.

Recording.1055.mp4