Tooltip: Exceptie bij unmounten

[WidoBurg]

Geobserveerd gedrag

Stacktrace bij tooltip die wordt 'geunmount'.

Reproductiepad

• https://int.omgevingswet.overheid.nl/checken/nieuw/stap/1 (met toolkit versie 68.0.0)
• Locatie kiezen
• Volgende stap
• Developer toolbar open
• Werkzaamheid toevoegen
• Werkzaamheid verwijderen
• Stacktrace

Er is ook scenario geweest de gehele pagina op wit ging. Dat scenario heb ik nog niet kunnen reproduceren maar dat scenario verhoogt de prioriteit wel (als in de zin blocker).

Verwacht gedrag

Geen stacktrace.

Overige informatie

Stacktraces worden ook opgepakt door Piwik wat niet wenselijk is.

Screenshot stacktrace

Screenshot code van toegepaste DsoTooltip

[tfrijsewijk]

Stencil is een compiler die Stencil Components vertaalt naar Web Components. De broncode zijn geen instructies voor de browser maar voor de compiler. Het is daarom niet evident wat voor code er uiteindelijk door de browser wordt uitgevoerd.

De trigger voor de exceptie is het zetten van @Prop() active met een waarde:

@Prop({ mutable: true, reflect: true })
active = true;

callback() {
	this.active = false
}

In de browser wordt er geen property gezet, maar een functie aangeroepen die een waarde zet:

// Psuedocode!
setValue(host, name, value) {
  host.$instanceValues$.set(name, value);
}

De exceptie wordt gegooid omdat host undefined is.

De functie setValue() wordt aangeroepen door een event listener callback op this.#target, wat een verwijzing is naar het element wat de tooltip activeert.

Echter, de callback wordt aangeroepen nadat Tooltip is vernietigd. Daarom is de verwijzing naar HTMLTooltipElement (host) undefined.

Onderliggende oorzaak is dat Tooltip gewoon heel slecht is opgezet. Oorzaak daarvan is weer de hoge verwachtingen gerelateerd tot de API van het component en de functionaliteit. Dit component moet zowel stateless zijn, als stateful. Daarnaast zijn de controls voor het aansturen van het component (@prop() active) in geval van stateless OOK de indicatoren voor de stateful modus.

Ik heb een vreselijk fix gevonden, maar het moet maar even. Dit component staat op de rol om totaal herschreven te worden. Zie #2315 (comment) voor meer informatie.