From fa6fc972076f521274a555e089103f24e00fc9a6 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Wed, 14 Oct 2026 17:14:21 -0700
Subject: [PATCH 1/3] augment SearchBox component to take optional
 focus/focusout event handlers

---
 app/components/search-box.gjs | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/app/components/search-box.gjs b/app/components/search-box.gjs
index fd57f65f05..9ea785480c 100644
--- a/app/components/search-box.gjs
+++ b/app/components/search-box.gjs
@@ -70,6 +70,20 @@ export default class SearchBoxComponent extends Component {
     }
   }
 
+  @action
+  focus() {
+    if (this.args.focus) {
+      this.args.focus();
+    }
+  }
+
+  @action
+  focusOut() {
+    if (this.args.focusout) {
+      this.args.focusout();
+    }
+  }
+
   searchTask = task({ restartable: true }, async () => {
     this.moveFocus();
     await timeout(DEBOUNCE_TIMEOUT);
@@ -87,6 +101,8 @@ export default class SearchBoxComponent extends Component {
         maxlength={{this.maxlength}}
         {{on "input" this.update}}
         {{on "keyup" this.keyUp}}
+        {{on "focus" this.focus}}
+        {{on "focusout" this.focusOut}}
       />
       <button
         aria-label={{t "general.search"}}

From 0cb6418f5761df0f3f6bdfd3e3e6df269a264cba Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Wed, 14 Oct 2026 17:15:04 -0700
Subject: [PATCH 2/3] added focus/focusout event handlers to SearchBox
 component in lm search component

---
 app/components/learningmaterial-search.gjs | 171 ++++++++++++---------
 1 file changed, 97 insertions(+), 74 deletions(-)

diff --git a/app/components/learningmaterial-search.gjs b/app/components/learningmaterial-search.gjs
index 2f35c65ce6..03310d539e 100644
--- a/app/components/learningmaterial-search.gjs
+++ b/app/components/learningmaterial-search.gjs
@@ -23,8 +23,10 @@ export default class LearningmaterialSearchComponent extends Component {
   @tracked searchResultsPerPage = 50;
   @tracked hasMoreSearchResults = false;
   @tracked searchReturned = false;
+  @tracked showResults = false;
 
   search = task({ restartable: true }, async (query) => {
+    this.showResults = true;
     if (query.trim() === '') {
       this.searchReturned = false;
       this.searchPage = 1;
@@ -61,6 +63,20 @@ export default class LearningmaterialSearchComponent extends Component {
     this.query = '';
   }
 
+  @action
+  focus() {
+    this.showResults = true;
+  }
+
+  @action
+  focusOut(event) {
+    const newFocus = event.relatedTarget;
+
+    if (!event.currentTarget.contains(newFocus)) {
+      this.showResults = false;
+    }
+  }
+
   searchMore = task({ drop: true }, async () => {
     const results = await this.store.query('learning-material', {
       q: this.query,
@@ -88,92 +104,99 @@ export default class LearningmaterialSearchComponent extends Component {
     element.style.width = `${element.previousElementSibling.clientWidth}px`;
   });
   <template>
-    <div class="learningmaterial-search" data-test-learningmaterial-search>
+    <div
+      class="learningmaterial-search"
+      {{on "focusout" this.focusOut}}
+      data-test-learningmaterial-search
+    >
       <SearchBox
         placeholder={{t "general.searchPlaceholder"}}
         @liveSearch={{true}}
         @search={{perform this.search}}
         @clear={{this.clear}}
+        @focus={{this.focus}}
       />
-      {{#if this.search.isRunning}}
-        <ul class="lm-search-results" {{this.resultsAppear}}>
-          <li>
-            {{t "general.currentlySearchingPrompt"}}
-          </li>
-        </ul>
-      {{else if this.searchResults.length}}
-        <ul class="lm-search-results" {{this.resultsAppear}}>
-          {{#each this.searchResults as |learningMaterial|}}
-            <li class={{if (includes learningMaterial.id @currentMaterialIds) "disabled"}}>
-              <button
-                class="result"
-                type="button"
-                {{on "click" (perform this.addLearningMaterial learningMaterial)}}
-              >
-                <div class="learning-material-title">
-                  <LmTypeIcon
-                    @type={{learningMaterial.type}}
-                    @mimetype={{learningMaterial.mimetype}}
-                  />
-                  <span data-test-title>
-                    {{learningMaterial.title}}
-                  </span>
-                </div>
-                <span class="learning-material-description">
-                  {{! template-lint-disable no-triple-curlies }}
-                  {{{learningMaterial.description}}}
-                </span>
-                {{#if learningMaterial.status.title}}
-                  <span class="learning-material-status">
-                    {{learningMaterial.status.title}}
+      {{#if this.showResults}}
+        {{#if this.search.isRunning}}
+          <ul class="lm-search-results" {{this.resultsAppear}}>
+            <li>
+              {{t "general.currentlySearchingPrompt"}}
+            </li>
+          </ul>
+        {{else if this.searchResults.length}}
+          <ul class="lm-search-results" {{this.resultsAppear}}>
+            {{#each this.searchResults as |learningMaterial|}}
+              <li class={{if (includes learningMaterial.id @currentMaterialIds) "disabled"}}>
+                <button
+                  class="result"
+                  type="button"
+                  {{on "click" (perform this.addLearningMaterial learningMaterial)}}
+                >
+                  <div class="learning-material-title">
+                    <LmTypeIcon
+                      @type={{learningMaterial.type}}
+                      @mimetype={{learningMaterial.mimetype}}
+                    />
+                    <span data-test-title>
+                      {{learningMaterial.title}}
+                    </span>
+                  </div>
+                  <span class="learning-material-description">
+                    {{! template-lint-disable no-triple-curlies }}
+                    {{{learningMaterial.description}}}
                   </span>
-                {{/if}}
-                <ul class="learning-material-properties">
-                  <li>
-                    {{t "general.owner"}}:
-                    {{learningMaterial.owningUser.fullName}}
-                  </li>
-                  {{#if learningMaterial.originalAuthor}}
+                  {{#if learningMaterial.status.title}}
+                    <span class="learning-material-status">
+                      {{learningMaterial.status.title}}
+                    </span>
+                  {{/if}}
+                  <ul class="learning-material-properties">
                     <li>
-                      {{t "general.contentAuthor"}}:
-                      {{learningMaterial.originalAuthor}}
+                      {{t "general.owner"}}:
+                      {{learningMaterial.owningUser.fullName}}
                     </li>
+                    {{#if learningMaterial.originalAuthor}}
+                      <li>
+                        {{t "general.contentAuthor"}}:
+                        {{learningMaterial.originalAuthor}}
+                      </li>
+                    {{/if}}
+                    <li>
+                      {{t "general.uploadDate"}}:
+                      {{formatDate
+                        learningMaterial.uploadDate
+                        day="2-digit"
+                        month="2-digit"
+                        year="numeric"
+                      }}
+                    </li>
+                  </ul>
+                </button>
+              </li>
+            {{/each}}
+            {{#if this.hasMoreSearchResults}}
+              <li>
+                <button
+                  disabled={{if this.searchMore.isRunning true}}
+                  type="button"
+                  data-test-show-more
+                  {{on "click" (perform this.searchMore)}}
+                >
+                  {{#if this.searchMore.isRunning}}
+                    <LoadingSpinner />
                   {{/if}}
-                  <li>
-                    {{t "general.uploadDate"}}:
-                    {{formatDate
-                      learningMaterial.uploadDate
-                      day="2-digit"
-                      month="2-digit"
-                      year="numeric"
-                    }}
-                  </li>
-                </ul>
-              </button>
-            </li>
-          {{/each}}
-          {{#if this.hasMoreSearchResults}}
+                  {{t "general.showMore"}}
+                </button>
+              </li>
+            {{/if}}
+          </ul>
+        {{else if this.searchReturned}}
+          <ul class="lm-search-results" {{this.resultsAppear}}>
             <li>
-              <button
-                disabled={{if this.searchMore.isRunning true}}
-                type="button"
-                data-test-show-more
-                {{on "click" (perform this.searchMore)}}
-              >
-                {{#if this.searchMore.isRunning}}
-                  <LoadingSpinner />
-                {{/if}}
-                {{t "general.showMore"}}
-              </button>
+              {{t "general.noSearchResultsPrompt"}}
             </li>
-          {{/if}}
-        </ul>
-      {{else if this.searchReturned}}
-        <ul class="lm-search-results" {{this.resultsAppear}}>
-          <li>
-            {{t "general.noSearchResultsPrompt"}}
-          </li>
-        </ul>
+          </ul>
+        {{/if}}
       {{/if}}
     </div>
   </template>

From 489b31ca30c853cec34d616a9eb5d8a22c72e99b Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Mon, 19 Oct 2026 15:59:14 -0700
Subject: [PATCH 3/3] search-box now takes splattributes for any additional
 event modifiers, and lm search now properly passes a modifier not an argument

---
 app/components/learningmaterial-search.gjs |  2 +-
 app/components/search-box.gjs              | 17 +----------------
 2 files changed, 2 insertions(+), 17 deletions(-)

diff --git a/app/components/learningmaterial-search.gjs b/app/components/learningmaterial-search.gjs
index 03310d539e..17a0868c82 100644
--- a/app/components/learningmaterial-search.gjs
+++ b/app/components/learningmaterial-search.gjs
@@ -114,7 +114,7 @@ export default class LearningmaterialSearchComponent extends Component {
         @liveSearch={{true}}
         @search={{perform this.search}}
         @clear={{this.clear}}
-        @focus={{this.focus}}
+        {{on "focus" this.focus}}
       />
       {{#if this.showResults}}
         {{#if this.search.isRunning}}
diff --git a/app/components/search-box.gjs b/app/components/search-box.gjs
index 9ea785480c..13423fad58 100644
--- a/app/components/search-box.gjs
+++ b/app/components/search-box.gjs
@@ -70,20 +70,6 @@ export default class SearchBoxComponent extends Component {
     }
   }
 
-  @action
-  focus() {
-    if (this.args.focus) {
-      this.args.focus();
-    }
-  }
-
-  @action
-  focusOut() {
-    if (this.args.focusout) {
-      this.args.focusout();
-    }
-  }
-
   searchTask = task({ restartable: true }, async () => {
     this.moveFocus();
     await timeout(DEBOUNCE_TIMEOUT);
@@ -101,8 +87,7 @@ export default class SearchBoxComponent extends Component {
         maxlength={{this.maxlength}}
         {{on "input" this.update}}
         {{on "keyup" this.keyUp}}
-        {{on "focus" this.focus}}
-        {{on "focusout" this.focusOut}}
+        ...attributes
       />
       <button
         aria-label={{t "general.search"}}