Contrib.social

Text fields are auto-submitted twice when filters are exposed as block

Open on Drupal.org →
Created on 15 August 2024, about 1 month ago
Updated 11 September 2024, 5 days ago

Problem/Motivation

I have a search text filter with auto-submit and the filter is exposed as a separate block.
With this setting, I can see the form being submitted twice.

auto-submit.js

      // When exposed as a block, the form #attributes are moved from the form
      // to the block element, thus the second selector.
      // @see \Drupal\block\BlockViewBuilder::preRender
      var selectors = 'form[data-bef-auto-submit-full-form], [data-bef-auto-submit-full-form] form, [data-bef-auto-submit]';

      // The change event bubbles so we only need to bind it to the outer form
      // in case of a full form, or a single element when specified explicitly.
      $(selectors, context).addBack(selectors).each(function (i, e) {
        // Store the current form.
        var $form = $(e);

        // Retrieve the autosubmit delay for this particular form.
        var autoSubmitDelay = $form.data('bef-auto-submit-delay') || 500;

        // Attach event listeners.
          $(once('bef-auto-submit', $form))
          // On change, trigger the submit immediately.
          .on('change', triggerSubmit)
          // On keyup, wait for a specified number of milliseconds before
          // triggering autosubmit. Each new keyup event resets the timer.
          .on('keyup', Drupal.debounce(triggerSubmit, autoSubmitDelay));
      });

The selectors above return two elements given the scenario above, which makes the listener attached to the form's Parent div and the form itself.
For example:

<div class="view.." data-bef-auto-submit-full-form="" data-bef-auto-submit="" data-bef-auto-submit-delay="1200" ... data-once="bef-auto-submit">
   <form action="/nod.." method="get" id="views-expo.." ... data-once="exposed-form bef-auto-submit form-updated" ..>

In the snippet above it is possible to see the bef-auto-submit included in the data-once for both elements.

Proposed resolution

Make the $form element point to the element that has the "data-bef-auto-submit-delay" attribute, so as not to duplicate the listeners.

🐛 Bug report
Status

Fixed

Version

7.0

Component

Code

Created by

🇧🇷Brazil andre.bonon

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024