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

Updated with more of the stack trace.

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 #.

We made some progress on a fix for this in class, but for some odd reason, we couldn't get the Twig |filter filter to work.

As a desperation play, I got things working with a for loop and an if-statement in the paragraph--bp-tabs.html.twig file.

      // Original code.
      {# for key, item in content.bp_tab_section|filter(key => key|first == '#') #}
      // Workaround code.
      {% 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 %}

I would love for someone with stronger Twig skills than I to tell me where the issue lies with the |filter

thanks,
-mike

@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?

@dalemoore - I'm not 100% sure of what you're asking, but I can confirm that the "original code" (in my snippet above) does not work for me.

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

I spent some time trying to figure out why, to no avail. Which is why I ended up rewriting it (for my own sanity) using a for-loop and if-statement. But, I really don't understand what I'm missing in the "original code".

-mike

@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 != '#' %}