Error when adding second filter in FilterBuilder (null querySelector in Layout.svelte)

[BraginaT]

Hello! We’re trying to implement this sample: [(https://docs.svar.dev/svelte/grid/samples/#/filterbuilder/willow)]

Filtering works for the first column, but when I click Add filter and select another column (any column except the first), I get this error:

Layout.svelte:383 Uncaught TypeError: Cannot read properties of null (reading 'querySelector')
at Layout.svelte:383:10 (line: input.querySelector("input").focus();)

$effect(() => {
  if (_field && input) {
    setTimeout(() => {
      input.querySelector("input").focus();
    }, 1);
  }
});

We have a patch that fixes the issue — could you please take a look? Thank you!

function down(e) {
+  if (e.target?.closest?.('.wx-dropdown')) return;
   oncancel && oncancel(e);
}

[Natasha-eng]

Hi @BraginaT ,

Thank you for sharing the details.
I wasn’t able to reproduce the issue you described. The filtering and adding filters work correctly on my side.

Here is a working example of the filter builder for your reference: https://snippet.svar.dev/svelte/7C4lxmscS

Also, you can check the full source code of this demo here:
https://github.com/svar-widgets/grid/blob/main/svelte/demos/cases/FilterBuilder.svelte

Please compare with your implementation, and if the problem persists, feel free to share a minimal reproducible snippet so that I can help you to investigate further.