From 2ef8eb0586b2dfb7d6d1f26b461f83e1ea57ee36 Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Wed, 6 Jul 2022 17:48:59 +0200
Subject: [PATCH] Handled opening search popup with data attribute

refs https://github.com/TryGhost/Team/issues/1665

- allows opening search popup in themes with custom data attribute
---
 ghost/sodo-search/src/App.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/ghost/sodo-search/src/App.js b/ghost/sodo-search/src/App.js
index 4fa9b3d2d3..a8079f04f7 100644
--- a/ghost/sodo-search/src/App.js
+++ b/ghost/sodo-search/src/App.js
@@ -45,12 +45,30 @@ export default class App extends React.Component {
         // Listen to preview mode changes
         this.handleSearchUrl();
         this.addKeyboardShortcuts();
+        this.setupCustomTriggerButton();
         this.hashHandler = () => {
             this.handleSearchUrl();
         };
         window.addEventListener('hashchange', this.hashHandler, false);
     }
 
+    /** Setup custom trigger buttons handling on page */
+    setupCustomTriggerButton() {
+        // Handler for custom buttons
+        this.clickHandler = (event) => {
+            event.preventDefault();
+            this.setState({
+                showPopup: true
+            });
+        };
+        const customTriggerSelector = '[data-ghost-search]';
+        this.customTriggerButtons = document.querySelectorAll(customTriggerSelector) || [];
+        this.customTriggerButtons.forEach((customTriggerButton) => {
+            customTriggerButton.removeEventListener('click', this.clickHandler);
+            customTriggerButton.addEventListener('click', this.clickHandler);
+        });
+    }
+
     handleSearchUrl() {
         const [path] = window.location.hash.substr(1).split('?');
         if (path === '/search' || path === '/search/') {