Add latest changes from gitlab-org/gitlab@master

1 files changed, 48 insertions, 0 deletions

diff --git a/app/assets/javascripts/header_search/init.js b/app/assets/javascripts/header_search/init.js
new file mode 100644
index 00000000000..2b9fac0b395
--- /dev/null
+++ b/app/assets/javascripts/header_search/init.js
@@ -0,0 +1,48 @@
+import * as Sentry from '@sentry/browser';
+
+async function eventHandler(callback = () => {}) {
+  if (this.newHeaderSearchFeatureFlag) {
+    const { initHeaderSearchApp } = await import(
+      /* webpackChunkName: 'globalSearch' */ '~/header_search'
+    ).catch((error) => Sentry.captureException(error));
+
+    // In case the user started searching before we bootstrapped,
+    // let's pass the search along.
+    const initialSearchValue = this.searchInputBox.value;
+    initHeaderSearchApp(initialSearchValue);
+
+    // this is new #search input element. We need to re-find it.
+    // And re-focus in it.
+    document.querySelector('#search').focus();
+    callback();
+    return;
+  }
+
+  const { default: initSearchAutocomplete } = await import(
+    /* webpackChunkName: 'globalSearch' */ '../search_autocomplete'
+  ).catch((error) => Sentry.captureException(error));
+
+  const searchDropdown = initSearchAutocomplete();
+  searchDropdown.onSearchInputFocus();
+  callback();
+}
+
+function cleanEventListeners() {
+  document.querySelector('#search').removeEventListener('focus', eventHandler);
+}
+
+function initHeaderSearch() {
+  const searchInputBox = document.querySelector('#search');
+
+  searchInputBox?.addEventListener(
+    'focus',
+    eventHandler.bind(
+      { searchInputBox, newHeaderSearchFeatureFlag: gon?.features?.newHeaderSearch },
+      cleanEventListeners,
+    ),
+    { once: true },
+  );
+}
+
+export default initHeaderSearch;
+export { eventHandler };