Skip to content

Commit 189be95

Browse files
committed
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
1 parent 1df2b92 commit 189be95

File tree

3 files changed

+23
-63
lines changed

3 files changed

+23
-63
lines changed

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

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
:host {
22
}
33

4-
.suggestions {
5-
position: relative;
6-
}
7-
84
.suggestions ol {
95
border: 1px solid var(--color-grey-200);
106
display: flex;
@@ -18,6 +14,7 @@
1814
}
1915

2016
.suggestions {
17+
position: relative;
2118
li {
2219
padding: 1rem;
2320
background-color: white;
@@ -42,8 +39,16 @@
4239
--uri-color: var(--color-grey-200);
4340
}
4441

45-
.bar {
42+
ion-searchbar {
43+
width: 100%;
44+
}
45+
46+
form {
4647
display: flex;
4748
flex-direction: row;
4849
align-items: center;
4950
}
51+
52+
.bar {
53+
flex-grow: 1;
54+
}

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

Lines changed: 1 addition & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ describe('pos-navigation-bar', () => {
1414
<pos-navigation-bar uri="https://pod.example/resource">
1515
<mock:shadow-root>
1616
<form>
17+
<pos-make-findable uri="https://pod.example/resource"></pos-make-findable>
1718
<div class="bar">
18-
<pos-make-findable uri="https://pod.example/resource"></pos-make-findable>
1919
<ion-searchbar debounce="300" enterkeyhint="search" placeholder="Search or enter URI" value="https://pod.example/resource"></ion-searchbar>
2020
</div>
2121
</form>
@@ -125,24 +125,6 @@ describe('pos-navigation-bar', () => {
125125
expect(page.root.querySelector('.suggestions')).toBeNull();
126126
});
127127

128-
it('shows the suggestions when focused', async () => {
129-
// given the user entered a text into the searchbar
130-
await type(page, 'test');
131-
132-
// then clicked elsewhere to hide suggestions
133-
page.doc.click();
134-
await page.waitForChanges();
135-
expect(page.root.querySelector('.suggestions')).toBeNull();
136-
137-
// when the user clicks into the search bar again
138-
const searchBar = page.root.querySelector('ion-searchbar');
139-
searchBar.focus();
140-
await page.waitForChanges();
141-
142-
// then suggestions are shown
143-
expect(page.root.querySelectorAll('.suggestions li')).toHaveLength(2);
144-
});
145-
146128
describe('keyboard selection', () => {
147129
it('selects the first suggestion when pressing key down', async () => {
148130
// when the user enters a text into the searchbar
@@ -216,28 +198,6 @@ describe('pos-navigation-bar', () => {
216198
expect(suggestions[0]).not.toHaveClass('selected');
217199
expect(suggestions[1]).toHaveClass('selected');
218200
});
219-
220-
it('resets the selection when losing focus', async () => {
221-
// given the user entered a text into the searchbar
222-
await type(page, 'test');
223-
await pressKey(page, 'ArrowDown');
224-
225-
// then clicked elsewhere to hide suggestions
226-
page.doc.click();
227-
await page.waitForChanges();
228-
expect(page.root.querySelector('.suggestions')).toBeNull();
229-
230-
// when the user clicks into the search bar again
231-
const searchBar = page.root.querySelector('ion-searchbar');
232-
searchBar.focus();
233-
await page.waitForChanges();
234-
235-
// then suggestions are shown
236-
const selections = page.root.querySelectorAll('.suggestions li');
237-
expect(selections).toHaveLength(2);
238-
expect(selections[0]).not.toHaveClass('selected');
239-
expect(selections[1]).not.toHaveClass('selected');
240-
});
241201
});
242202

243203
it('does not clear suggestions when clicked on itself', async () => {

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

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,6 @@ export class PosNavigationBar implements PodOsAware {
5757
event.stopPropagation();
5858
}
5959

60-
@Listen('focus')
61-
onFocus() {
62-
this.search();
63-
}
64-
6560
@Listen('keydown')
6661
handleKeyDown(ev: KeyboardEvent) {
6762
if (ev.key === 'Escape') {
@@ -93,8 +88,8 @@ export class PosNavigationBar implements PodOsAware {
9388
render() {
9489
return (
9590
<form onSubmit={e => this.onSubmit(e)}>
91+
<pos-make-findable uri={this.uri}></pos-make-findable>
9692
<div class="bar">
97-
<pos-make-findable uri={this.uri}></pos-make-findable>
9893
<ion-searchbar
9994
enterkeyhint="search"
10095
placeholder="Search or enter URI"
@@ -103,18 +98,18 @@ export class PosNavigationBar implements PodOsAware {
10398
onIonChange={e => this.onChange(e)}
10499
onIonInput={e => this.onChange(e)}
105100
/>
101+
{this.suggestions.length > 0 ? (
102+
<div class="suggestions">
103+
<ol>
104+
{this.suggestions.map((it, index) => (
105+
<li class={index === this.selectedIndex ? 'selected' : ''}>
106+
<pos-rich-link uri={it.ref}></pos-rich-link>
107+
</li>
108+
))}
109+
</ol>
110+
</div>
111+
) : null}
106112
</div>
107-
{this.suggestions.length > 0 ? (
108-
<div class="suggestions">
109-
<ol>
110-
{this.suggestions.map((it, index) => (
111-
<li class={index === this.selectedIndex ? 'selected' : ''}>
112-
<pos-rich-link uri={it.ref}></pos-rich-link>
113-
</li>
114-
))}
115-
</ol>
116-
</div>
117-
) : null}
118113
</form>
119114
);
120115
}

0 commit comments

Comments
 (0)