Я пытаюсь сфокусироваться на ссылке на событии размытия кнопки, используя java-скрипт, но он не работает.
при нажатии на вкладку фокус переходит в адресную строку.
JavaScript
blur(closebutton: HTMLButtonElement, link: HTMLButtonElement,p) {
console.log(closebutton);
console.log(link);
console.log(document.activeElement)
link.focus();
console.log("active element before closing popover")
console.log(document.activeElement)
console.log(document.hasFocus())
}
консольный вывод:
<button class="close">…</button>
<button class="popoverLink" container="body" html="true" placement="top-right bottom-right" popoverclass="custom-popover" triggers="manual" ng-reflect-auto-close="true" ng-reflect-ngb-popover="[object Object]" ng-reflect-placement="top-right bottom-right" ng-reflect-triggers="manual" ng-reflect-container="body" ng-reflect-popover-class="custom-popover" aria-describedby="ngb-popover-1"> DIV </button>
<body class="mat-typography">…</body>
active element before closing popover
<button class="popoverLink" container="body" html="true" placement="top-right bottom-right" popoverclass="custom-popover" triggers="manual" ng-reflect-auto-close="true" ng-reflect-ngb-popover="[object Object]" ng-reflect-placement="top-right bottom-right" ng-reflect-triggers="manual" ng-reflect-container="body" ng-reflect-popover-class="custom-popover" aria-describedby="ngb-popover-1"> DIV </button>
true
HTML
<div>
<ng-template #popContent>
<span id="glossary"> {{element.description| glossary:glossaryDescription}}</span>
<button class="close" (click)="p.close(); returnFocus(p)" #closebutton (focus)="true" (blur)="blur(closebutton,link,p)"><img src="assets/icons/close.svg"></button>
</ng-template>
<button class="popoverLink" [ngbPopover]="popContent"
triggers="manual" #p="ngbPopover"
(click)="start = true; p.open(); returnFocus(p)" [autoClose]="true" placement="top-right bottom-right"
container="body"
html="true" popoverClass="custom-popover" (shown)="openPopover(p);" (keypress)=" keypress(p)" #link >
{{split(element.description)[0]}}
</button>
/{{split(element.description)[1]}}
</div>
