Wenn das Pop-up geschlossen ist, erhält der Elternteil Fokus anstelle von Knopf, die das Popup geöffnet haben ⇐ HTML

[Anonymous]

Ich habe eine ziemlich komplizierte benutzerdefinierte Datumspunktkomponente in Angular, die in der Funktion einer Standard -HTML -Datumseingabe ähnlich ist. Es wird erwartet, dass der Fokus auf die Taste, die den Kalender geöffnet hat, zurückgeführt wird, wenn der Benutzer das Kalenderpop-up schließt, entweder durch Auswahl eines Datums oder ohne Auswahl ohne Auswahl. Aber aus irgendeinem Grund wird der Fokus auf die übergeordnete Eingabe (oder Etikett) gezwungen, selbst wenn ich versuche, den Fokus auf die Taste zu erzwingen. Soll es aus irgendeinem Grund so funktionieren? Ist die einzige Möglichkeit, es zu beheben, um das Popup aus der Eingangskomponente herauszuziehen?

Code: Select all

const inputLbl = document.getElementById("inputLbl");

function showTip() {
if (!document.getElementById('newDiv')) {
const newDiv = document.createElement('div');
newDiv.id = 'newDiv';
newDiv.textContent = "Here's a tip for you!"
newDiv.style.cssText = 'width: 80px; height: 80px; background-color: lightgray; border-style: solid;';

const newButton = document.createElement('button');
newButton.textContent = 'close';
newButton.style.cssText = 'display: block; margin: 1rem;'
newButton.addEventListener('click', function() {
newDiv.remove();
// the focusing - it does nothing!
document.getElementById('showTip').focus();
});
newDiv.appendChild(newButton);
inputLbl.appendChild(newDiv);
newButton.focus();
}
}< /code>

Input:

?