Switching between OverlayPanels

[pixelated-au]

I'm reusing a component that uses an OverlayPanel for a 'settings' display. PrimeVue 3.3.5. Vue 3 CompositionAPI with Typescript.

I have a list of products that are added/removed dynamically. On each item is a button to display the OverlayPanel to display settings for the product.

Whilst an OverlayPanel is currently being shown, if the user clicks to display another OverlayPanel, the moment he types something into a textfield, an exception is thrown.

In this process, the user doesn't actually close the first panel, he just goes from one panel to the next.

However, if the user closes the panel before re-opening the next panel, everything works as expected; no exception is thrown.

The only way to consistently make sure the user doesn't encounter this issue is to make the component non-dismissable and have a close button; slowing down the user workflow.

Uncaught TypeError: _this.container is null
    onEnter overlaypanel.esm.js:100
    eventListener utils.esm.js:744
    emit utils.esm.js:760
    onOverlayClick overlaypanel.esm.js:210
    3 overlaypanel.esm.js:244
    callWithErrorHandling runtime-core.esm-bundler.js:154
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:163
    invoker runtime-dom.esm-bundler.js:301
    addEventListener runtime-dom.esm-bundler.js:251
    patchEvent runtime-dom.esm-bundler.js:269
    patchProp runtime-dom.esm-bundler.js:337
    mountElement runtime-core.esm-bundler.js:3826
    processElement runtime-core.esm-bundler.js:3789
    patch runtime-core.esm-bundler.js:3709
    componentEffect runtime-core.esm-bundler.js:4278
    reactiveEffect reactivity.esm-bundler.js:42
    callWithErrorHandling runtime-core.esm-bundler.js:154
    flushJobs runtime-core.esm-bundler.js:362
    promise callback*queueFlush runtime-core.esm-bundler.js:264
    queueJob runtime-core.esm-bundler.js:258
    run reactivity.esm-bundler.js:183
    trigger reactivity.esm-bundler.js:189
    set reactivity.esm-bundler.js:291
    set runtime-core.esm-bundler.js:6154
    show overlaypanel.esm.js:77
    showSettings base-form-element.vue:44
    callWithErrorHandling runtime-core.esm-bundler.js:154
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:163
    invoker runtime-dom.esm-bundler.js:301
    addEventListener runtime-dom.esm-bundler.js:251
    patchEvent runtime-dom.esm-bundler.js:269
    patchProp runtime-dom.esm-bundler.js:337
    mountElement runtime-core.esm-bundler.js:3826
    processElement runtime-core.esm-bundler.js:3789
    patch runtime-core.esm-bundler.js:3709
    componentEffect runtime-core.esm-bundler.js:4211
    reactiveEffect reactivity.esm-bundler.js:42
    effect reactivity.esm-bundler.js:17
    setupRenderEffect runtime-core.esm-bundler.js:4176
    mountComponent runtime-core.esm-bundler.js:4134
    processComponent runtime-core.esm-bundler.js:4094
    patch runtime-core.esm-bundler.js:3712
    mountChildren runtime-core.esm-bundler.js:3894
    mountElement runtime-core.esm-bundler.js:3817
    processElement runtime-core.esm-bundler.js:3789
    patch runtime-core.esm-bundler.js:3709
    mountChildren runtime-core.esm-bundler.js:3894
    mountElement runtime-core.esm-bundler.js:3817
    processElement runtime-core.esm-bundler.js:3789
    patch runtime-core.esm-bundler.js:3709
    mountChildren runtime-core.esm-bundler.js:3894
    mountElement runtime-core.esm-bundler.js:3817
    processElement runtime-core.esm-bundler.js:3789
    patch runtime-core.esm-bundler.js:3709
    componentEffect runtime-core.esm-bundler.js:4211
    reactiveEffect reactivity.esm-bundler.js:42
    effect reactivity.esm-bundler.js:17
    setupRenderEffect runtime-core.esm-bundler.js:4176
    mountComponent runtime-core.esm-bundler.js:4134

[cagataycivici]

Should be fixed with 3.4.0.