Prevent navigation by link from collection-list component

This commit is contained in:
Yana De Pauw
2019-08-30 15:41:50 +02:00
parent 228a61e7ed
commit 343a1498ac
3 changed files with 16 additions and 3 deletions

View File

@@ -13,9 +13,11 @@
<div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
<div class="dropdown-list">
<div *ngFor="let suggestionOption of suggestions">
<a href="#" class="d-block dropdown-item" (click)="onClickSuggestion(suggestionOption)" #suggestion>
<button class="d-block dropdown-item" (click)="onClickSuggestion(suggestionOption)" #suggestion>
<div class="click-blocker">
</div>
<ds-wrapper-list-element [object]="suggestionOption"></ds-wrapper-list-element>
</a>
</button>
</div>
</div>
</div>

View File

@@ -60,7 +60,7 @@ describe('DsoInputSuggestionsComponent', () => {
const clickedIndex = 0;
beforeEach(() => {
spyOn(comp, 'onClickSuggestion');
const clickedLink = de.query(By.css('.dropdown-list > div:nth-child(' + (clickedIndex + 1) + ') a'));
const clickedLink = de.query(By.css('.dropdown-list > div:nth-child(' + (clickedIndex + 1) + ') button'));
clickedLink.triggerEventHandler('click', {});
fixture.detectChanges();
});

View File

@@ -1,12 +1,23 @@
.autocomplete {
width: 100%;
.dropdown-item {
white-space: normal;
word-break: break-word;
padding: $input-padding-y $input-padding-x;
position: relative;
&:focus {
outline: none;
}
.click-blocker {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}