feat(navigation bar): do not show search results when focussed and prevent hiding the label index option below search results

This is a "good enough" fix until the nav bar is redesigned in general

Author: angelo-v

elements/src/components/pos-navigation-bar/pos-navigation-bar.css

@@ -1,10 +1,6 @@
 :host {
 }
 
-.suggestions {
-  position: relative;
-}
-
 .suggestions ol {
   border: 1px solid var(--color-grey-200);
   display: flex;
@@ -18,6 +14,7 @@
 }
 
 .suggestions {
+  position: relative;
   li {
     padding: 1rem;
     background-color: white;
@@ -42,8 +39,16 @@
   --uri-color: var(--color-grey-200);
 }
 
-.bar {
+ion-searchbar {
+  width: 100%;
+}
+
+form {
   display: flex;
   flex-direction: row;
   align-items: center;
 }
+
+.bar {
+  flex-grow: 1;
+}

elements/src/components/pos-navigation-bar/pos-navigation-bar.spec.tsx

@@ -14,8 +14,8 @@ describe('pos-navigation-bar', () => {
     <pos-navigation-bar uri="https://pod.example/resource">
       <mock:shadow-root>
         <form>
+          <pos-make-findable uri="https://pod.example/resource"></pos-make-findable>
           <div class="bar">
-            <pos-make-findable uri="https://pod.example/resource"></pos-make-findable>
             <ion-searchbar debounce="300" enterkeyhint="search" placeholder="Search or enter URI" value="https://pod.example/resource"></ion-searchbar>
           </div>
         </form>
@@ -125,24 +125,6 @@ describe('pos-navigation-bar', () => {
       expect(page.root.querySelector('.suggestions')).toBeNull();
     });
 
-    it('shows the suggestions when focused', async () => {
-      // given the user entered a text into the searchbar
-      await type(page, 'test');
-
-      // then clicked elsewhere to hide suggestions
-      page.doc.click();
-      await page.waitForChanges();
-      expect(page.root.querySelector('.suggestions')).toBeNull();
-
-      // when the user clicks into the search bar again
-      const searchBar = page.root.querySelector('ion-searchbar');
-      searchBar.focus();
-      await page.waitForChanges();
-
-      // then suggestions are shown
-      expect(page.root.querySelectorAll('.suggestions li')).toHaveLength(2);
-    });
-
     describe('keyboard selection', () => {
       it('selects the first suggestion when pressing key down', async () => {
         // when the user enters a text into the searchbar
@@ -216,28 +198,6 @@ describe('pos-navigation-bar', () => {
         expect(suggestions[0]).not.toHaveClass('selected');
         expect(suggestions[1]).toHaveClass('selected');
       });
-
-      it('resets the selection when losing focus', async () => {
-        // given the user entered a text into the searchbar
-        await type(page, 'test');
-        await pressKey(page, 'ArrowDown');
-
-        // then clicked elsewhere to hide suggestions
-        page.doc.click();
-        await page.waitForChanges();
-        expect(page.root.querySelector('.suggestions')).toBeNull();
-
-        // when the user clicks into the search bar again
-        const searchBar = page.root.querySelector('ion-searchbar');
-        searchBar.focus();
-        await page.waitForChanges();
-
-        // then suggestions are shown
-        const selections = page.root.querySelectorAll('.suggestions li');
-        expect(selections).toHaveLength(2);
-        expect(selections[0]).not.toHaveClass('selected');
-        expect(selections[1]).not.toHaveClass('selected');
-      });
     });
 
     it('does not clear suggestions when clicked on itself', async () => {

elements/src/components/pos-navigation-bar/pos-navigation-bar.tsx

@@ -57,11 +57,6 @@ export class PosNavigationBar implements PodOsAware {
     event.stopPropagation();
   }
 
-  @Listen('focus')
-  onFocus() {
-    this.search();
-  }
-
   @Listen('keydown')
   handleKeyDown(ev: KeyboardEvent) {
     if (ev.key === 'Escape') {
@@ -93,8 +88,8 @@ export class PosNavigationBar implements PodOsAware {
   render() {
     return (
       <form onSubmit={e => this.onSubmit(e)}>
+        <pos-make-findable uri={this.uri}></pos-make-findable>
         <div class="bar">
-          <pos-make-findable uri={this.uri}></pos-make-findable>
           <ion-searchbar
             enterkeyhint="search"
             placeholder="Search or enter URI"
@@ -103,18 +98,18 @@ export class PosNavigationBar implements PodOsAware {
             onIonChange={e => this.onChange(e)}
             onIonInput={e => this.onChange(e)}
           />
+          {this.suggestions.length > 0 ? (
+            <div class="suggestions">
+              <ol>
+                {this.suggestions.map((it, index) => (
+                  <li class={index === this.selectedIndex ? 'selected' : ''}>
+                    <pos-rich-link uri={it.ref}></pos-rich-link>
+                  </li>
+                ))}
+              </ol>
+            </div>
+          ) : null}
         </div>
-        {this.suggestions.length > 0 ? (
-          <div class="suggestions">
-            <ol>
-              {this.suggestions.map((it, index) => (
-                <li class={index === this.selectedIndex ? 'selected' : ''}>
-                  <pos-rich-link uri={it.ref}></pos-rich-link>
-                </li>
-              ))}
-            </ol>
-          </div>
-        ) : null}
       </form>
     );
   }