Bug in affix.js breaks sticky header

Created on 22 August 2023, over 1 year ago
Updated 23 September 2023, over 1 year ago

Upgrading 5.5.12 => 5.5.13 broke the sticky (affixed) header on my site.

It definitely stopped working because of changes to affix.js

I believe it was the changes here:
https://git.drupalcode.org/project/bootstrap_barrio/-/commit/f359ac69528...

rolling back to 5.5.12 and affix works again.

🐛 Bug report
Status

Fixed

Version

5.5

Component

Code

Created by

🇨🇦Canada robbdavis

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

Comments & Activities

  • Issue created by @robbdavis
  • 🇮🇳India shubham_jain

    hi, this line
    $(once('affixed', '[data-toggle="affix"]', context)).each(function () {
    was changed into
    once('affixed', '[data-toggle="affix"]', context).forEach(function () {

    This change caused the jQuery issue, that's why it is not working properly.
    Please replace this code with this
    $(once('affixed', '[data-toggle="affix"]', context)).forEach(function () {
    then it should work fine.

  • 🇷🇺Russia truman_ru

    Same problem.

    @shubham_jain thank you for #2!

  • 🇮🇳India shubham_jain

    Hi @trumanru and @robbdavis, sorry for the late reply.

    I have solved this error and here is the patch for it.

  • Open in Jenkins → Open on Drupal.org →
    Core: 10.0.7 + Environment: PHP 8.2 & MySQL 8
    last update over 1 year ago
    4 fail
  • Open in Jenkins → Open on Drupal.org →
    Core: 9.5.x + Environment: PHP 8.0 & MySQL 5.7 (--ignore-platform-reqs)
    last update over 1 year ago
    4 fail
  • 🇨🇦Canada teknocat

    This is not the actual problem nor is this the provided patch (#5) the correct fix for the problem.

    Drupal core no longer includes the jQuery once library because it is trying to move away from the dependency on jQuery altogether in the long run. jQuery once was replaced by a new core/once library that is independent of jQuery or other third-party libraries. If switching affix.js back to using jQuery once works for you then that library must be getting included in your particular Drupal site, either directly by you because you chose to include it or because another module still depends on it and has it as a composer dependency and thus includes it.

    I found that affix.js stopped working for me as of the upgrade to Drupal 10.1.2 (from 10.1.0, so it's possible that 10.1.1 breaks it as well). After some investigation, I found that in this version of core, the once library has changed a bit, such that it is no longer possible to get the matched element using "this" within the foreach function. Instead, you have to update use of once to get the element passed into the function.

    Lines 29 and 30 of affix.js just need to be changed to this:

          once('affixed', '[data-toggle="affix"]', context).forEach((element) => {
            var ele = $(element),
    

    And Bob's your uncle. I will try to submit a merge request with the changes so the diff from that can be used as a patch.

  • Open on Drupal.org →
    Core: 10.1.0-alpha1 + Environment: PHP 7.4 & MySQL 5.7
    last update over 1 year ago
    Waiting for branch to pass
  • @teknocat opened merge request.
  • Open on Drupal.org →
    Core: 10.1.0-alpha1 + Environment: PHP 7.4 & MySQL 5.7
    last update over 1 year ago
    Waiting for branch to pass
  • @teknocat opened merge request.
  • Open in Jenkins → Open on Drupal.org →
    Core: 10.1.x + Environment: PHP 8.1 & MariaDB 10.3.22
    last update over 1 year ago
    4 fail
  • 🇨🇦Canada teknocat

    By the way, if this is ONLY an issue with the very latest Drupal core 10.1 version and the change does not work in previous versions, then it might be prudent to do a new release version of this theme that is only compatible with the latest release and update the version compatibility of the previous release.

  • 🇺🇸United States crutch

    Thank you teknocat #6. Hits the spot.

  • First commit to issue fork.
  • Open on Drupal.org →
    Core: 10.1.0-alpha1 + Environment: PHP 7.4 & MySQL 5.7
    last update over 1 year ago
    Waiting for branch to pass
  • Status changed to Fixed over 1 year ago
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024