fix: update event handlers to call stopPropagation

otherwise, with React 17's changes to event delegation, the event handlers that the newly mounted components set up in `componentDidMount` would fire immediately, immediately dismissing the component again
owid · Nov 7, 2023 · 4a9a2a1 · 4a9a2a1
1 parent 080c15e
commit 4a9a2a1
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 10 deletions.
diff --git a/adminSiteClient/EditableTags.tsx b/adminSiteClient/EditableTags.tsx
@@ -173,7 +173,10 @@ export class EditableTags extends React.Component<{
                                 )}
                                 <button
                                     className="btn btn-link EditableTags__action"
-                                    onClick={this.onToggleEdit}
+                                    onClick={(e) => {
+                                        this.onToggleEdit()
+                                        e.stopPropagation()
+                                    }}
                                 >
                                     <FontAwesomeIcon icon={faEdit} />
                                     Edit

diff --git a/packages/@ourworldindata/grapher/src/controls/ActionButtons.tsx b/packages/@ourworldindata/grapher/src/controls/ActionButtons.tsx
@@ -248,11 +248,10 @@ export class ActionButtons extends React.Component<{
                                 dataTrackNote="chart_click_download"
                                 showLabel={this.showButtonLabels}
                                 icon={faDownload}
-                                onClick={action(
-                                    () =>
-                                        (this.manager.isDownloadModalOpen =
-                                            true)
-                                )}
+                                onClick={(e) => {
+                                    this.manager.isDownloadModalOpen = true
+                                    e.stopPropagation()
+                                }}
                                 style={{ width: "100%" }}
                             />
                         </li>
@@ -264,7 +263,10 @@ export class ActionButtons extends React.Component<{
                                 dataTrackNote="chart_click_share"
                                 showLabel={this.showButtonLabels}
                                 icon={faShareNodes}
-                                onClick={this.toggleShareMenu}
+                                onClick={(e) => {
+                                    this.toggleShareMenu()
+                                    e.stopPropagation()
+                                }}
                                 isActive={this.manager.isShareMenuActive}
                                 style={{ width: "100%" }}
                             />

diff --git a/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx b/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx
@@ -77,8 +77,9 @@ export class EntitySelectionToggle extends React.Component<{
             <div className="entity-selection-menu">
                 <button
                     className={classnames("menu-toggle", { active })}
-                    onClick={(): void => {
+                    onClick={(e): void => {
                         this.props.manager.isSelectingData = !active
+                        e.stopPropagation()
                     }}
                     data-track-note="chart_add_entity"
                 >

diff --git a/packages/@ourworldindata/grapher/src/controls/ShareMenu.tsx b/packages/@ourworldindata/grapher/src/controls/ShareMenu.tsx
@@ -79,11 +79,12 @@ export class ShareMenu extends React.Component<ShareMenuProps, ShareMenuState> {
         document.removeEventListener("click", this.onClickSomewhere)
     }
 
-    @action.bound onEmbed(): void {
+    @action.bound onEmbed(e: React.MouseEvent): void {
         const { canonicalUrl, manager } = this
         if (!canonicalUrl) return
         manager.isEmbedModalOpen = true
         this.dismiss()
+        e.stopPropagation()
     }
 
     @action.bound async onNavigatorShare(): Promise<void> {

diff --git a/packages/@ourworldindata/grapher/src/footer/Footer.tsx b/packages/@ourworldindata/grapher/src/footer/Footer.tsx
@@ -413,7 +413,8 @@ export class Footer<
                 <a
                     className="learn-more-about-data"
                     data-track-note="chart_click_sources"
-                    onClick={action(() => {
+                    onClick={action((e) => {
+                        e.stopPropagation()
                         // if embbedded, open the sources modal
                         if (this.manager.isEmbeddedInAnOwidPage) {
                             this.manager.isSourcesModalOpen = true