user-story icon indicating copy to clipboard operation
user-story copied to clipboard

Dismiss modal on backdrop click & prevent event bubbling on modal.

Open prajwalkulkarni opened this issue 3 years ago • 0 comments

Issue Number

fixes #199

Describe the changes you've made Added onClick listener on the modal backdrop. But, since the div that holds the actual modal is the child of the whole modal container, clicking on the modal would also dismiss the modal, this is an undesired behavior, and to avoid such behaviors, I've prevented event bubbling from the child div to the outer div(backdrop) by using e.stopPropagation().

Describe if there is any unusual behavior (Any Warning) of your code(Write NA if there isn't) NA

Additional context (OPTIONAL)

Test plan (OPTIONAL)

A good test plan should give instructions that someone else can easily follow.

Go to any story, and click on the share button. You'll then be presented with a modal containing social media icons to share the story. Click on the backdrop and the modal will be dismissed. Alternatively, the close button(x) can also be clicked to dismiss the modal. Checklist

  • [x] My code follows the code style of this project.
  • [ ] My change requires a change to the documentation.
  • [ ] I have updated the documentation accordingly.
  • [x] All new and existing tests passed.
  • [x] The title of my pull request is a short description of the requested changes.

Provide a Deployed link of route/page that needs to review

Preview: Deploy preview link here with the appropriate route

prajwalkulkarni avatar Mar 28 '22 12:03 prajwalkulkarni