[Bug] initTextFilter throws TypeError when multiple text filters are used

[hhhc]

Package

backpack/pro v3.0.3 (also affects earlier versions)

Backpack version

• backpack/crud 7.0.22
• backpack/pro 3.0.3
• PHP 8.3
• Laravel 12

Bug description

When a CRUD list view has more than one text filter, the page throws a JavaScript error:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at initTextFilter

This breaks the clear button functionality on all text filters except the last one defined.

Steps to reproduce

1. Create a CrudController with two or more text filters:

$this->crud->addFilter([
    'type' => 'text',
    'name' => 'filter_one',
    'label' => 'Filter One',
], false, function ($value) {
    $this->crud->addClause('where', 'column_one', 'LIKE', "%$value%");
});

$this->crud->addFilter([
    'type' => 'text',
    'name' => 'filter_two',
    'label' => 'Filter Two',
], false, function ($value) {
    $this->crud->addClause('where', 'column_two', 'LIKE', "%$value%");
});

2. Load the list view in the browser.
3. Open the browser console — the TypeError appears immediately.

Root cause

In vendor/backpack/pro/resources/views/filters/text.blade.php, the initTextFilter function is pushed via @push('after_scripts') once per text filter. Each push redefines the global initTextFilter function.

The problem is on line 33, where the clear button selector uses a hardcoded Blade variable:

let clearButton = filter.querySelector('.text-filter-{{ $filter->key }}-clear-button');

Since @push appends content and the function is redefined each time, the last text filter's $filter->key wins. When initTextFilter is called for any earlier text filter, querySelector looks for the wrong class name, returns null, and clearButton.addEventListener(...) throws.

Expected behavior

The initTextFilter function should work correctly for all text filters, regardless of how many are on the page.

Suggested fix

Two changes in text.blade.php:

1. Use the dynamic JS variable filterKey (already extracted from the DOM on line 30) instead of the Blade variable:

- let clearButton = filter.querySelector('.text-filter-{{ $filter->key }}-clear-button');
+ let clearButton = filter.querySelector('.text-filter-' + filterKey + '-clear-button');

2. Change @push to @pushOnce so the function is only defined once (since it's now fully dynamic, there's no need to redefine it per filter):

- @push('after_scripts')
+ @pushOnce('after_scripts')
  <script>
      function initTextFilter(filter, filterNavbar) {
          ...
      };
  </script>
- @endpush
+ @endPushOnce

[backpack-ai-bot]

CrawlChat Answer:

Based on your detailed bug report, this is a valid issue with how the text filter's JavaScript function is implemented in Backpack. The problem you've identified is accurate:

The Issue:
When multiple text filters exist on a CRUD list view, the initTextFilter function gets redefined with each @push('after_scripts') call. This causes the hardcoded Blade variable {{ $filter->key }} to always refer to the last filter's key, breaking the clear button for all earlier filters.

Your Suggested Fix is Sound:

1. Replace hardcoded Blade variable with dynamic JS variable: Use the already-extracted filterKey from the DOM instead of {{ $filter->key }}
2. Change @push to @pushOnce: Since the function becomes fully dynamic, it only needs to be defined once

This approach is technically correct and follows best practices for managing global functions in JavaScript.

Recommended Actions:
This issue should be reported to the Backpack team if it hasn't been already. You can:

• Check existing Backpack issues on GitHub
• File a new bug report with your reproduction steps and suggested fix
• Consider submitting a pull request with the proposed changes

In the meantime, you could work around this by publishing the text filter view and applying your fix locally:

php artisan vendor:publish --provider="Backpack\CRUD\BackpackServiceProvider" --tag=crud-views

Then edit resources/views/vendor/backpack/crud/filters/text.blade.php with your suggested changes.

Would you like guidance on publishing Backpack views or filing an issue on GitHub?

ℹ️ Please note our AI Bot does not reply to follow-ups, this will be the only AI answer in this thread. If the AI helped you find the answer, please mark it as answered or write details below so it can learn. Then close the conversation. If not, please give more information for when a human reads this. ℹ️

Relevant sources:

Filters PRO :: 7.x Docs :: Backpack for Laravel
select2_ajax is adding _text on search filter
Filters not working since switch to v5
Drozone returning array_filter() error
[Pro] HTML in Select2 fields
[Bug] Null is being populated as a String if MariaDB used
Is there a way to optimize the delete function script ?
[Bug] Test issue
Resetting filters when persistent table is enabled