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="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
<div class="dropdown-list"> <div class="dropdown-list">
<div *ngFor="let suggestionOption of suggestions"> <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> <ds-wrapper-list-element [object]="suggestionOption"></ds-wrapper-list-element>
</a> </button>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -60,7 +60,7 @@ describe('DsoInputSuggestionsComponent', () => {
const clickedIndex = 0; const clickedIndex = 0;
beforeEach(() => { beforeEach(() => {
spyOn(comp, 'onClickSuggestion'); 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', {}); clickedLink.triggerEventHandler('click', {});
fixture.detectChanges(); fixture.detectChanges();
}); });

View File

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