Dropdown popper affixed element

[719media]

This is concerning the lines in the dropdown.js:

if ($(parent).hasClass(ClassName.DROPUP)) {
  if ($(this._menu).hasClass(ClassName.MENULEFT) || $(this._menu).hasClass(ClassName.MENURIGHT)) {
    element = parent;
  }
}

which landed in 70f4a30

I'm not sure why the code is so explicit in declaring the element parent to be used in popper for this exact circumstance. It makes for some frustrating styling.

See example here, which is extremely ugly looking visually but I have provided to make clear the issue:

https://jsfiddle.net/g09bzzzw/18/

You can see that the first dropdown runs as expected, the menu is aligned to the button, everything is great.

The second menu appears aligned with the parent, because of the condition which matches the code in dropdown.js. This makes for a nice menu that appears outside of the "toolbar" area (the yellow hover).

The third menu does not appear nicely, because it is missing the "dropup" class which is needed to have popper affix to the parent according to the code in dropdown.js.

Given that in some cases, affixing to dropdown-toggle is desired, and in other cases, the parent of dropdown-toggle, I think this should just merely be a config option. Then it can be affixed to either, instead of the above custom code.

Then the above code could just be changed to

if (this._config.affix === 'parent') {
  element = parent;
}

This also has other benefits of having the dropdown menu easily affix to other elements regardless of the .dropdown-toggle's shape or visibility. (it can even be hidden and programatically shown and still work). Another use case would be to position the menu aligned with the whole button for a split button dropdown:

https://getbootstrap.com/docs/4.0/components/dropdowns/#split-button-dropdowns

instead of aligned with the split button.

What do you think?

[Johann-S]

Yep that's my commit and I cannot remember why I introduced that... But after I did some tests today it seems it wasn't relevant and we should remove that code.

About your feature proposal to affix our dropdown why not, I'm not against it

EDIT :
if some of you have any concerns about adding an affix option to our dropdown plugin do not hesitate 👍

/CC @mdo @XhmikosR @andresgalante @patrickhlauke @bardiharborow

[719media]

I was hoping this would land in v4. I created a pull request for this:

#25219

in the hopes it might help. Allows for specifying a node for reference as well