Configuring a slot on Layout Builder make the page to redirect on the block form

Please note, it seems it is not happening with theme ui_suite_dsfr for example.

just a question, i am not sure about it : would it be related to how dropdown buttons are managed in bootstrap?

Yes, because in fact, no matter which block is used in Layout builder, as soon as we have a slot (for example in a component block in LB), and the dropdown button to add a source, it does not work anymore.
If i desactiveate the dropdown button, and repace it to a list of buttons, then ajax works again.

so the problem you encountered is clearly related to how dropdown are handled here in ui_suite_bootstrap.
Maybe we are not constructing well the dropdown ? i don't have the final answer yet

would you have some feedbacks about dropdowns please :) ?

I will recheck, but the problem did not occur on 2.0.0-beta6, so something changed between 2.0.0-beta6 and 2.0.0-rc1, I would guess related to link prop type normalization.

Nope, not there.

I compared the HTML in both cases of the button:

beta6:
<button type="submit" id="settings-formatter-settings-wrapper-settings-ui-patterns-slots-items-itemssettings-formatter-settings-wrapper-settings-ui-patterns-slots-items-field-formatternodewebsitefield-website-types-add-more" name="itemssettings_formatter_settings_wrapper_settings_ui_patterns_slots_items_field_formatternodewebsitefield_website_types_add_more" value="Mise en forme de champ" class="button js-form-submit form-submit btn-outline-dark btn" data-once="drupal-ajax">Mise en forme de champ</button>

rc1:
<button type="submit" id="settings-formatter-settings-wrapper-settings-ui-patterns-slots-items-itemssettings-formatter-settings-wrapper-settings-ui-patterns-slots-items-field-formatternodewebsitefield-website-types-add-more" name="itemssettings_formatter_settings_wrapper_settings_ui_patterns_slots_items_field_formatternodewebsitefield_website_types_add_more" value="Mise en forme de champ" class="button js-form-submit form-submit btn-outline-dark btn">Mise en forme de champ</button>

So the problem is that some JS behavior is no more attached in rc1.

I checked, "drupal-ajax" is put by app/core/misc/ajax.js, in the attach method (which is not overridden by UI Suite Bootstrap by the way)

So I put a console.log just before once('drupal-ajax', $(elementSettings.selector)):

beta6: I have plenty of debug in browser console.
rc1: 0 console.log.

So it means that in the case of rc1 Drupal ajax settings are not present or erased or not correctly built.

I searched in UI Patterns history in the diff between beta6 and rc1 and I have no idea where it is coming from.

@grimreaper, would you try something for me ?

in the src/Element/ComponentSlotForm.php, in function buildComponentDropbutton (around line 400),
add a first line return $elements;.

Then it seems everythings works, could you confirm please?

Ok, thanks.

I am testing.

Also during the night, I need to check if it is a side effect of pwa:pwa_service_worker which potentially has an extremely aggressive cache and that some Layout Builder endpoints should be excluded from the cache.

So, not PWA, as Layout Builder path starts with admin and admin path is excluded from cache.

So I tried like you asked:

protected static function buildComponentDropbutton(array $elements = []): array {
    return $elements;
    $build = [
      '#type' => 'dropbutton',
      '#dropbutton_type' => 'small',
      '#links' => [],
    ];

Then I have:

And yes, then it works.

Strange because in the diff https://git.drupalcode.org/project/ui_patterns/-/compare/2.0.0-beta6...2... I don't see change on this method or class.

Hello,

I think it would be better to convert the source dropdown into a select.

1: it will ensure the theming is easier/out-of-the-box.
2: I think it will solve this ajax bug
3: personally, when I see the arrow of the dropdown, I click on it and then I forget that there is the "Add component" option first.

Thanks!

I confirm the fix. RTBC.

I let you merge if you want.

OK for me because:

• The new UI is good enough for me
• It is the same data structure

Christian, if you are OK too, we merge:

                component_id: null
                variant_id:
                  source_id: select
                  source:
                    value: ''
                slots:
                  title:
                    sources:
                      -
                        source:
                          component:
                            component_id: 'ui_suite_dsfr:button'
                            variant_id:
                              source_id: select
                              source:
                                value: ''
                            props:
                              attributes:
                                source_id: attributes
                                source:
                                  value: ''
                              title:
                                source_id: textfield
                                source:
                                  value: ''
                              url:
                                source_id: url
                                source:
                                  value: ''
                              target:
                                source_id: select
                                source:
                                  value: ''
                              external:
                                source_id: checkbox
                              disabled:
                                source_id: checkbox
                              icon_position:
                                source_id: select
                                source:
                                  value: ''
                              tooltip:
                                source_id: textfield
                                source:
                                  value: ''
                              id:
                                source_id: textfield
                                source:
                                  value: ''
                              social:
                                source_id: select
                                source:
                                  value: ''
                              icon:
                                source_id: icon
                                source:
                                  value: null
                            slots:
                              slots: {  }
                        source_id: component
                        _weight: '0'
                props:
                  attributes:
                    source_id: attributes
                    source:
                      value: ''
                  dismissible:
                    source_id: select
                    source:
                      value: ''
                  close_title:
                    source_id: textfield
                    source:
                      value: ''
                  title_tag:
                    source_id: select
                    source:
                      value: ''

Decided collectively during the weekly.

Instead of a list of buttons inside a fieldset, let's try with a select form element with:

• - Select a source to add - as empty option of the form element
• An AJAX mechanism (using the Druapl Form State API) to submit on change