Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Memory leak in QSelect component with "use-input" prop enabled

See original GitHub issue

What happened?

“use-input” prop on QSelect, wrapped in QDialog, produces a memory leak.

What did you expect to happen?

“use-input” prop on QSelect, wrapped in QDialog, doesn’t produce a memory leak.

Reproduction URL

https://jsfiddle.net/dmytro_svyrydenko/jx1trcLv/14/

How to reproduce?

Go to the provided reproduction link.
Go to the “Memory” tab, and select the second VM instance, where the code result is running. Make a Heap Snapshot. It will be the initial value.
Click on the “TOGGLE” button.
Focus on any field so that the dropdown with options is opened.
Close the dropdown, and click “TOGGLE” to hide elements.
Go to the “Memory” tab, and select the second VM instance, where the code result is running.
Make Heap Snapshot (Garbage Collection is called automatically, but you can force it manually if you wish).
Filter both initial and newly created Snapshots by “Detached”.
See the difference in Detached elements on the page. Each repetition of steps 2-4 just increases the number of detached nodes.

Happens on both UMD and Vue CLI plugin versions. Didn’t test others.

Flavour

UMD

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome, Safari, Microsoft Edge

Quasar info output

Operating System        Darwin(22.1.0) - darwin/x64
NodeJs                  12.18.3

Global packages    
  NPM                   6.14.6
  yarn                  1.16.0
  @quasar/cli           1.3.2
  @quasar/icongenie     Not installed
  cordova               Not installed

Relevant log output

No response

Additional context

No response

Issue Analytics

State:
Created a year ago
Comments:9 (6 by maintainers)

Top GitHub Comments

1reaction

rstoenescucommented, Nov 1, 2022

Yes.

1reaction

rstoenescucommented, Nov 1, 2022

More findings:

There are no detached elements when devtools is not opened (and never was opened for the respective page). So basically this is a non-issue in production. Tested with Edge (Chromium & Blink based, not perfectly equivalent to Chrome) and its “Detached Elements” feature in devtools (+ forced GC, important!).
Just be more accurate with the methodology used to test (the previous example kept references to btn and root elements):

<!DOCTYPE html>
<html>
  <body>
    <div id="root">
      <button id="btn">Click me</button>
      <input>
    </div>

    <script>
      function fn () {
        document.getElementById('btn').removeEventListener('click', fn)
        document.getElementById('root').remove()
      }

      document.getElementById('btn').addEventListener('click', fn)
    </script>
  </body>
</html>

It DOES matter if there is an input element (that got focused!). When the previously focused input element gets removed and devtools was opened then a bug in chromium hinders GC to do its job fully. Eventually, GC will kick in, but definitely not immediately.

Conclusion: At some point, this will get fixed in the Chromium/Blink engine. But we really can’t do anything about it in Quasar. But it seems to not affect a production environment.