Issue with ACF Select fields used as Block Controls within Beaver Builder

[ghen-arvesu]

Hi @eliot-akira,

We've identified a potential issue with the combination of ACF Select fields used as Block Controls within Beaver Builder, specifically when using the latest updates to L&L and Blocks version 4.2.3.

The options within the ACF Select dropdown menus (used as Block Controls) are not displaying correctly. We've observed the following behaviors:

The dropdown options appear in unexpected locations on the page (see screenshot below).

The dropdown menu appears, but the options are not selectable or do not trigger any action when clicked (see screenshot below).

It appears the field=labels method for defining choices in the ACF Select field is no longer functioning correctly in this version. The method below it (specifying choices directly) does seem to work.

Hope you can help us with this as soon as you can as we heavily rely on Blocks and ACF Select fields for content creation and management. Thank you so much!

[ghen-arvesu]

Hi @eliot-akira just want to checkin how we are doing here?

[eliot-akira]

I might need help from @nicolas-jaussaud with this issue.

There was no change related to Beaver Builder in L&L 4.2.3, as far as I know. So the issue could be some kind of conflict introduced by a newer version of Beaver.

It appears the field=labels method for defining choices in the ACF Select field is no longer functioning correctly in this version. The method below it (specifying choices directly) does seem to work.

When you say "defining choices", do you mean displaying the select field's choice labels on the frontend? Or is it about the block controls on the backend, for example using <Loop field=labels> to define available choices of a Select control?

In any case it could help to see an example code snippet of the template where the issue is happening.

To summarize, there are 3 issues described:

• In the Beaver Builder's block settings panel, for the control type "Select" created by a block template:
  • Dropdown options appear in unexpected locations on the page
  • Dropdown menu appears, but the options are not selectable or do not trigger any action
• On the site frontend:
  • Not able to display the available labels of a block control type "Select" (created by block template) using <Loop field=labels>. The labels are still accessible individually.

[eliot-akira]

@ghen-arvesu For this issue too, I probably need to run a local copy of the site to see the issue in action.

the combination of ACF Select fields used as Block Controls within Beaver Builder

I misunderstood this part. So this "select" block control is not created by Tangible Blocks. As far as I tested, that method is working. Instead, it's an ACF Select field added to Beaver Builder's block controls.

Could you describe how that works? I couldn't figure out how to do that from ACF's Field Group settings. But in this case, if ACF is rendering that select field, it sounds like the issue is with ACF itself?

---

I tested getting labels from a regular ACF Select field added to a non-Beaver post, and it's working as expected.

<Loop acf_select=select_field field=labels>
  Label: <Field /> <br>
</Loop>

---

Maybe the issue is with ACF on both backend (display of select options in builder) and frontend (getting labels from the field definition).

[ghen-arvesu]

Hey @eliot-akira here is the copy of the Block and I dont think I can also give you a local copy here because of their setup im so sorry but @nicolas-jaussaud had let me know that it could be a CSS conflict with beaver-builder because they use the same library to create the select because he had a similar issue and will check it out.

[eliot-akira]

OK, got it. I'll keep you updated.

Yeah I've seen before how Beaver's CSS is problematic, as it strongly affects everything inside the builder. It's a challenge to protect the controls' styling.

By the way, some time ago I improved the PNG Compressor library (used to create block/template export file) to support embedding data within any existing image. So instead of looking like "visual noise", eventually we could have a block export file with preview, or a blocks package with cover image.

[nicolas-jaussaud]

Hi!

Regarding the issue for the select dropdown in the beaver-builder editor, it is really similar to an issue we had in old version of blocks (fixed in that commit)

Fields create dropdown elements as a direct childs of <body> and use absolute positioning to put them below the select. It works that way to be sure the dropdown is always above the page content

If I remember correctly, the issue was that the beaver-builder editor content is inside an iframe and the dropdown was created inside the iframe <body> (instead of inside the parent <body>)

The associated logic for this is handled inside the Popover component

I believe the issue is a bit different this time (and might not be linked to the iframe), but I think it is still related to this component and to the way we are positioning dropdown in fields

I tested locally and was able to recreate the issue on my side. While the dropdown is initially in the correct area, it stays at the same place when we scroll down:
https://github.com/user-attachments/assets/f32850b6-2124-4080-9823-5ec427560d39

I took a look at how the dropdown behave inside our example pages and it seems that when the dropdown is open, scroll is deactivated on the page:
https://github.com/user-attachments/assets/f5e47438-8c4e-428b-b47e-3f9114292c58

So I believe the issue is that, somehow, scrolling is not deactivated as it should when we open a dropdown inside the beaver-builder editor