"Unsupported operand types: string + int" error on multiple templates

The problem seems to be from the introduction of this filter:

{% for key, item in content.bp_tab_section|filter(key => key|first != '#') %}

combined with

#{{ paragraph_id }}-{{ key + 1 }}

I don't think that filter does what it's supposed to do in Drupal 10. Before it was written like this:

{% for key, item in content.bp_tab_section if key|first != '#' %}

But that won't work in Drupal 10, either.

And you can't just break up the for and if statements like this:

{% for key, item in content.bp_tab_section  %}
{% if key|first != '#' %}

Because loop.first isn't working either. There are tons of other things in that array that start with #.

@ultimike does the loop.first not work for you too? I am using that same method, but the loop.first doesn't make the first tab active on page load. Wondering if it's something in my code or if not working for you as well?

@ultimike I'm referring to this part:
<li role="presentation" class="{% if loop.first %}active{% endif %}"><a href="#{{ paragraph_id }}-{{ key + 1 }}" aria-controls="{{ item['#paragraph'].bp_tab_section_title.value }}" role="tab" data-toggle="tab">{{ item['#paragraph'].bp_tab_section_title.value }}</a></li>
If that part is working, when the page loads the first tab should be active and its tab panel should be shown. If it's not working, then no tab panel will be visible until you first click one of the tabs. For me, using the code you have works to make the tabs work, but the first tab and its panel aren't shown on page load because the "active" class isn't being applied.

@ultimike Apparently that Twig|filter {% for key, item in content.bp_tab_section|filter(key => key|first == '#') %} doesn't work on my site neither.
I tried your "workaround code", it did work but I got several warnings:
Warning: Array to string conversion in __TwigTemplate_50b45d73b2f3aed42e8c7384c3269f44->doDisplay() (line 141 of sites/default/files/php/twig/641b550d27442_paragraph--bp-tabs.html.t_JiV0wBml5bZeEjCJFMlyyWRdu/q6IuPi1QF5Vc0ZOn_ezvXfazGeN5Ju6PQDbYqX9W-jI.php).

Hello,

I have same error. I change to

{#% for key, item in content.bp_tab_section|filter(key => key|first != '#') %#}
{% for key, item in content.bp_tab_section %}
{% if key|first != '#' %}

<li role="presentation" class="{% if loop.first %}active{% endif %}"><a href="#{{ paragraph_id }}-{{ key + 1 }}" aria-controls="{{ item['#paragraph'].bp_tab_section_title.value }}" role="tab" data-toggle="tab">{{ item['#paragraph'].bp_tab_section_title.value }}</a></li>
{% endif %}
{% endfor %}

...

{# Loops through the tab sections again to print the tab section bodies. #}
{#% for key, item in content.bp_tab_section|filter(key => key|first != '#') %#}
{% for key, item in content.bp_tab_section %}
{% if key|first != '#' %}

And for accordion same error for paragraph--bp-accordion.html.twig
and the same change

{# Loop through all of the accordion sections. #}
{#% for key, item in content.bp_accordion_section|filter(key => key|first != '#') %#}
{% for key, item in content.bp_accordion_section %}
{% if key|first != '#' %}

...

{% endif %}
{% endfor %}

After this change no error and tabs and accordions works fine for tabs without error. But for accordion, the accordions list is not displayed and activated immediately. You have to select the first tab to display the accordions.

Need a stable release and test also for bootstrap 5 (with barrio bootstrap 5 theme)

Thanks very well.
AFA

We are getting the same error on paragraph--bp-accordiaon.html.twig. It is not happy with the for+if.

This is similar to an issue where you can't do for ifs anymore similar to this:

 {% for key, item in content.field_card_links if key|first != '#' %}

has to be

{% for key, item in content.field_card_links %} 
          {% if key|first != '#' %}

So any single line for/ifs need to be changed to separate for and then ifs.

I suspect that the reason this wasn't flagged by the Upgrade Status module is because the |filter is broken not these templates themselves. My guess is that the definition uses if on a for tag which has been deprecated which seems strange to me, but researching the reasoning behind that is probably best left for another individual.

Patch fixes the problem for me. Same problem also seen on Drupal 9.5 when upgrading to the dev version of this module, and the patch fixed it there too.

The patch doesn't apply for me. Using the dev version of the module on 10.0.9.

Got it to work, another patch was messing it up.

Hi,

Patch doesn't fix the problem for me on 9.5.9 : my carousel literally disappears though no error is logged.

Here's my code from line 169 of paragraph--bp-carousel.html.twig (slightly adjusted for Bootstrap 5):

…
{# Prints Carousel template. #}
{{ content|without('bp_slide_content','bp_slide_interval', 'bp_width', 'bp_background') }}
<div{{ attributes.addClass(classes).setAttribute('id', paragraph_id).setAttribute('data-bs-interval', slide_interval_classes).setAttribute('data-bs-ride', 'carousel') }}>
  <ol class="carousel-indicators">
    {% for key, item in content.bp_slide_content %}
      {% if key|first != '#' %}
        <li class="{% if loop.first %}active{% endif %}" data-bs-slide-to="{{ key }}" data-bs-target="#{{ paragraph_id }}"></li>
      {% endif %}
    {% endfor %}
  </ol>
  <div class="carousel-inner" role="list">
    {% for key, item in content.bp_slide_content %}
      {% if key|first != '#' %}
        <div class="paragraph--layout-slideshow__slide-{{ key + 1 }} item carousel-item{% if loop.first %}active{% endif %}" role="listitem">{{ item }}</div>
      {% endif %}
    {% endfor %}
  </div>
  <a class="left carousel-control" href="#{{ paragraph_id }}" role="button" data-bs-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="right carousel-control" href="#{{ paragraph_id }}" role="button" data-bs-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div>

And here's my previous code, that works but isn't compatible with Drupal 10:

…
{# Prints Carousel template. #}
{{ content|without('bp_slide_content','bp_slide_interval', 'bp_width', 'bp_background') }}
<div{{ attributes.addClass(classes).setAttribute('id', paragraph_id).setAttribute('data-bs-interval', slide_interval_classes).setAttribute('data-bs-ride', 'carousel') }}>
  <ol class="carousel-indicators">
    {% for key, item in content.bp_slide_content if key|first != '#' %}
      <li class="{% if loop.first %}active{% endif %}" data-bs-slide-to="{{ key }}" data-bs-target="#{{ paragraph_id }}"></li>
    {% endfor %}
  </ol>
  <div class="carousel-inner" role="list">
    {% for key, item in content.bp_slide_content if key|first != '#' %}
      <div class="paragraph--layout-slideshow__slide-{{ key + 1 }} item carousel-item{% if loop.first %} active{% endif %}" role="listitem">{{ item }}</div>
    {% endfor %}
  </div>
  <a class="left carousel-control" href="#{{ paragraph_id }}" role="button" data-bs-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="right carousel-control" href="#{{ paragraph_id }}" role="button" data-bs-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div>

If anyone could tell me what I did wrong, I would be very grateful !

Thanks!

Same problem

Hello, @platinum1 and @yecmom,
I manage to make it works by adding manually the patch on issue :
https://www.drupal.org/project/bootstrap_paragraphs/issues/3221758
>> https://www.drupal.org/files/issues/2022-03-15/bootstrap_paragraphs-3221...

{% for key, item in content.bp_slide_content if key|first != '#' %}
needs to be updated to {% for key, item in content.bp_slide_content|filter((value, key) => key|first != '#') %}
For reference https://www.drupal.org/docs/upgrading-drupal/prepare-major-upgrade/prepa...
Patch attached.

The same issue was coming in bp-accordion and patch suggested in #22 is fixing that issue as well.

#22 worked for us with 2.0.x-dev on Drupal 10.1.2

Patch applies and has two approving comments.