Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AutoComplete: setTimeout() in hide-function sometimes causes NULL-Pointer Exception #2881

Closed
MarcTM01 opened this issue Aug 24, 2022 · 0 comments
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@MarcTM01
Copy link

Describe the bug

I am using the PrimeVue AutoComplete component to realize a search bar that displays suggestions. When the user hits enter (and does not click on any of the suggestion) he gets redirected to a search results page. This sometimes causes a NULL-Pointer exception:
image

Upon closer inspection, it turns out that the hide() function is called whenever the user hits enter inside the AutoComplete. This function then does not hide the AutoComplete results directly, but calls a setTimeout() todo so (see source excerpt below)

hide(isFocus) {
        const _hide = () => {
            this.$emit('before-hide');
            this.dirty = isFocus;
            this.overlayVisible = false;
            this.focusedOptionIndex = -1;
            isFocus && this.$refs.focusInput.focus();
        }
        setTimeout(() => { _hide() }, 0); // For ScreenReaders
    },

This results in the _hide() occasionally getting called when the AutoComplete component no longer exists resulting in a NULL-Pointer-Exception (at least that is my working theory). Proposed solution: Remove the setTimeout() or introduce proper null checks into the _hide() function.

Reproducer

https://codesandbox.io/s/jovial-poitras-n5kouo

PrimeVue version

3.16.1

Vue version

3.x

Language

ALL

Build / Runtime

Vue CLI App

Browser(s)

Tested in Chrome 104.0 but other browsers are likely effected as well

Steps to reproduce the behavior

Since the issue is browser-timeout based, reproducing it can be tricky.
To reliably reproduce the issue:

  1. Go to the linked codesandbox (https://n5kouo.csb.app/)
  2. Use the browser devTools to manually increase the timeout on the setTimeout() call from 0 to 100 (don't forget to save the changes)
    image
  3. Type anything you want into the searchbar and wait for the autocomplete suggestions to appear
  4. Hit enter.

The manually increased setTimeout() time is only required for reliable replication, it also sometimes happens without the change (at least in my real-world app with a lot more components and work for the browser)

Expected behavior

I expect no error to occur

@MarcTM01 MarcTM01 added the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label Aug 24, 2022
@mertsincan mertsincan self-assigned this Aug 24, 2022
@mertsincan mertsincan added this to the 3.17.0 milestone Aug 24, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

2 participants