Autosuggest: TypeError reading $instanceValues$ bij unmounten

[cvanderleij-ilionx]

Geobserveerd gedrag

In stap 2 van de vergunningscheck krijgt de bezoeker de volgende error te zien wanneer er wordt gezocht op een zoekterm, de autosuggest naar voren komen en heel snel op enter wordt gedrukt. De bug is lastig te reproduceren omdat het op een bepaalde tijd aan komt.

2491.429ca27b46881e211452.js:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$instanceValues$')
    at wr (491.429ca27b46881e211452.js:1:124851)
    at e.get [as scrollPosition] (491.429ca27b46881e211452.js:1:127377)
    at e._setScrollState (dsotoolkitCoreVendor.31fad5f113b0df7c1cb4.js:1:21135)
    at dsotoolkitCoreVendor.31fad5f113b0df7c1cb4.js:1:20405
    at Array.forEach (<anonymous>)
    at ResizeObserver.<anonymous> (dsotoolkitCoreVendor.31fad5f113b0df7c1cb4.js:1:20343)
    at l (dsotoolkitCoreVendor.31fad5f113b0df7c1cb4.js:1:599212)
    at c (dsotoolkitCoreVendor.31fad5f113b0df7c1cb4.js:1:599326)
    at w.<computed> (polyfills.353e01edee1eab0b.js:1:11046)
    at u.invokeTask (polyfills.353e01edee1eab0b.js:1:19758)

Reproductiepad

1. Ga naar https://int12.omgevingswet.overheid.nl/checken
2. Klik op "Doe de vergunningscheck"
3. Typ een adres
4. Klik op volgende stap
5. Typ een werkzaamheid en zodra je het autosuggest component ziet druk je de enter toets in.
6. De bug komt naar voren als je stap 5 snel genoeg uitvoert

Verwacht gedrag

Geen foutmelding

Overige informatie

@tfrijsewijk heeft een fix uitgerold voor de tooltip die hier wellicht ook van toepassing is: #2997

[iterox]

ionic-team/ionic-framework#30136

[iterox]

In scrollable.tsx:

const resizeObserver = new ResizeObserver(
  debounce(
    (entries: ResizeObserverEntry[]) =>
      entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),
    50,
  ),
);

Waarom zou hier een debounce van 50ms omheen zitten?

De resizeObserver.observe() wordt aangeroepen in componentDidLoad() voor de shadowContainerDiv en alle slottedElements; in deze specifieke situatie is dat de ul (role=listbox) van de autosuggest.

In de disconnectedCallback() van scrollable.tsx wordt resizeObserve.unobserve() aangeroepen op shadowContainerDiv en slottedElements.

Stel dat er binnen 50ms na het aanroepen van componentDidLoad(),disconnectedCallback() wordt aangeroepen dan zou er een situatie kunnen ontstaan waarbij het host-element er niet meer is en er dan te laat een _setScrollState() wordt uitgevoerd.