Conundrum when using Select 2

Yeah, you are right, I also noticed that for multiple field values. But not sure enough, the best way how to display the button here.
Maybe something like here, where we'll have a button group with all links for all nodes, and display the short title of the node, to know which one we want to edit?

Yes, definitely!

Personally, I would prefer the second of your proposed options, something looking like this...

Unless of course, you anticipate the possibility of adding other possible actions in the future, in which case, your first suggestion.
What other actions do you envisage as even being possible: Publish/UNPublish, Promote etc. ?

Basically, I designed this for edit pages only, but probably in the future, it will make sense to extend functionality as you described.
Anyway, I would like to start with editing pages for now, so I like your suggestion with the "EDIT" button and dropdown of nodes.

I'll proceed with this way.

I want to add just a note, of what we need to do here.

To implement that we need:

• go to \Drupal\entity_reference_edit_link\Plugin\Field\FieldWidget\EntityReferenceEditLinkAutocompleteWidget::formElement() and change the type of displaying link if field allows multiple values. We need to change the type from the link to dropbutton and provide according values to this type
• add support dropbutton link types for the \Drupal\entity_reference_edit_link\Plugin\Field\FieldWidget\EntityReferenceEditLinkAutocompleteTagsWidget
• As I see it also has a variable for the button heading, we need to implement that as well to provide 'Edit' heading and list of the nodes in the dropdown

Hey _shy,

Any plans to move this on as discussed above, can I help test anything?

Hi sirclickalot,

Thanks for the ping, to be honest, I lost a bit on this topic. But I'll return to that soon, maybe even today =)
Sure, you can help with testing, it would be nice, thank you.

Will prepare changes for that soon.

sirclickalot,

I created a PR with changes and also attached a patch for easy testing. Please, take a look, I checked different cases locally, but not sure if I handle all possible cases for that.

Thanks.

Hi _shy,

Yes, that looks to do the trick! ...

→

As you can see, there is a cosmetic problem but I think that's probably a Gin admin problem rather then this module.

Oh, okay, I see. I tested it with the Claro theme and didn't experience such a problem.
Seems like taxonomy terms have long names and that causes an input field to extend to the bottom.

Ok, will check that. Great, that we found this bug now, thanks.

Hmm, strange, I couldn't reproduce such an issue locally. I installed the Gin theme on the Clear Drupal installation.

Could you please check the styles for this drop down element? Maybe we can find the root of the issue.

Is it because I am using the Select 2 module on that field?

I wasn't sure whether you were in your test above.

Here the markup anyway; there's rather a lot of it so I have cut it down a bit...

<div
  class="field--type-entity-reference field--name-field-prerequisites field--widget-select2-entity-reference js-form-wrapper form-wrapper"
  data-drupal-selector="edit-field-prerequisites-wrapper" id="edit-field-prerequisites-wrapper">
  <div
    class="js-form-item form-item js-form-type-select form-type--select js-form-item-field-prerequisites form-item--field-prerequisites help-icon__description-container"
    data-select2-id="20">
    <div class="help-icon">
      <label for="edit-field-prerequisites" class="form-item__label">Prerequisite LEARNING</label>

      <button class="help-icon__description-toggle" data-form-description-toggle-attached="true"
        id="help-icon-label--5648" aria-expanded="false" aria-controls="target"></button>
    </div>
    <div class="help-icon__element-has-description" data-select2-id="19">
      <select data-drupal-selector="edit-field-prerequisites" aria-describedby="edit-field-prerequisites--description"
        id="edit-field-prerequisites" name="field_prerequisites[]"
        class="form-select select2-widget form-element form-element--type-select-multiple select2-hidden-accessible"
        multiple=""
        data-select2-config="{&quot;multiple&quot;:true,&quot;placeholder&quot;:{&quot;id&quot;:&quot;&quot;,&quot;text&quot;:&quot;- None -&quot;},&quot;allowClear&quot;:false,&quot;dir&quot;:&quot;ltr&quot;,&quot;language&quot;:&quot;en&quot;,&quot;tags&quot;:false,&quot;theme&quot;:&quot;gin&quot;,&quot;maximumSelectionLength&quot;:-1,&quot;tokenSeparators&quot;:[],&quot;selectOnClose&quot;:false,&quot;width&quot;:&quot;100%&quot;}"
        data-once="select2-init" data-select2-id="edit-field-prerequisites" tabindex="-1" aria-hidden="true">
        <option value="7674" selected="selected" data-select2-id="12">Advanced data structures: Introduction (Tutorial)
        </option>
        <option value="7625" selected="selected" data-select2-id="13">Algorithms: Performance and efficiency (Tutorial)
        </option>
        <option value="7262" data-select2-id="32">Abstraction (Tutorial)</option>
        <option value="7538" data-select2-id="33">Adder circuitry (Tutorial)</option>
        <option value="7723" data-select2-id="34">Applying Boolean logic (Tutorial)</option>
        <option value="8613" data-select2-id="35">Basic parts list (Tutorial)</option>
...
      </select><span class="select2 select2-container select2-container--gin select2-container--below" dir="ltr"
        data-select2-id="11" style="width: 100%;"><span class="selection"><span
            class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true"
            aria-expanded="false" tabindex="-1" aria-disabled="false">
            <ul class="select2-selection__rendered">
              <li class="select2-selection__choice" title="Advanced data structures: Introduction (Tutorial)"
                data-select2-id="14"><span class="select2-selection__choice__remove"
                  role="presentation">×</span>Advanced data structures: Introduction (Tutorial)</li>
              <li class="select2-selection__choice" title="Algorithms: Performance and efficiency (Tutorial)"
                data-select2-id="15"><span class="select2-selection__choice__remove"
                  role="presentation">×</span>Algorithms: Performance and efficiency (Tutorial)</li>
              <li class="select2-search select2-search--inline"><input class="select2-search__field" type="search"
                  tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false"
                  role="searchbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;"></li>
            </ul>
          </span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
    </div>
    <div id="edit-field-prerequisites--description" class="form-item__description visually-hidden"
      aria-labelledby="help-icon-label--5648">
      Drag to re-order content items.
    </div>
  </div>
  <div class="reference-edit-link-wrapper form-item js-form-wrapper form-wrapper" data-drupal-selector="edit-link"
    id="edit-link--7">
    <div class="dropbutton-wrapper dropbutton-multiple" data-drupal-ajax-container=""
      data-once="dropbutton ginDropbutton">
      <div class="dropbutton-widget">
        <ul class="reference-edit-link dropbutton dropbutton--small dropbutton--multiple dropbutton--gin"
          target="_blank" data-drupal-selector="edit-link">
          <li class="default dropbutton__item dropbutton-action"><a href="">Edit</a></li>
          <li class="dropbutton-toggle"><button type="button" class="dropbutton__toggle"><span
                class="visually-hidden">List additional actions</span></button></li>
          <li class="dropbutton__item dropbutton-action secondary-action">
            <ul class="dropbutton__items" style="position: fixed; right: 134px; top: 311.094px;">
              <li class="dropbutton__item dropbutton-action secondary-action"><a href="/node/7674/edit" target="_blank"
                  hreflang="en">Advanced data structures: Introduction</a></li>
              <li class="dropbutton__item dropbutton-action secondary-action"><a href="/node/7625/edit" target="_blank"
                  hreflang="en">Algorithms: Performance and efficiency</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Sorry, but that didn't help. Could you please provide a list of styles for the dropdown element?
I also use the Select 2 field formatter for that, but can't reproduce it.

It seems like some additional styles are present in the dropdown element, breaking it into two columns.

My apologies _shy, you were quite clear in your request for CSS and not HTML!

As far as I can see, there is absolutely nowhere where I am explicitly adjusting either entity-reference-edit-link or select-2 elements - the candidate for both those, the culprit would be my gin-custom.css but even if I completely empty that file flush caches, I am still seeing the same effect - so I'm going to claim that "it's not me!"

My CSS debugging has never been a strong point so I could probably use a bit of guidance as to how isolate the CSS you're interested in look at.

What I can see is this...

...and, visually, that seems to suggest the width of the innermost <ul> might be the source of the problem?

Thank you sirclickalot, for your testing.

It seems like some style issues, but I'm unsure where it comes from. You can add a class .open for the .dropbutton-wrapper .dropbutton-multiple element. It will help to keep the dropdown open all the time.

Also, it's important to check styles for the <ul> element. Because as you mentioned earlier the main problem is the position and the width of each item. Could you please check styles for the whole <ul> element and for the links inside the list?

Hi _shy,

Thank you for that.

I did a bit of a module clean out last week and today I went to investigate the <ul> that you suggested but I was pleasantly surprised to see that I am no longer seeing the odd behaviour that I reported above so maybe it was due one of the older modules interfering.

Anyway, I confirm that the patch: https://www.drupal.org/files/issues/2024-11-14/entity_reference_edit_lin... → does the job nicely and all is well…

Thank you for your patience with me!

Thank you, sirclickalot, for your time.

I've fixed some coding standards issues and merged these changes to the 1.x-dev branch.
I'll create a new release with these changes soon.

These changes were released in the 1.1.4 version.

Feel free to use =)

Automatically closed - issue fixed for 2 weeks with no activity.