Button Group: Artifact in render in dropdown control

[tamara-nexus]

Describe the bug

Strange visual artifact appears when Button Group is used in a Dropdown. We needed to have a button group in a filter panel and we could not find any other control (other than dropdown) to implement this e.g. a special popup panel control or something else.

To Reproduce

Steps to reproduce the behavior:

1. Add a button group control in a dropdown control
2. View in browser
3. Strange line appears centered above buttons

P.S. this does not appear when button group is used directly e.g. in a page

Screenshots

[b-d-m-p]

I am not able to reproduce this "artifact", which I am assuming is the border line in the middle of the button group that extends above the group.

This is what it looks like in my setup.

<sl-dropdown>
  <sl-button slot="trigger" caret>Dropdown</sl-button>
  <sl-menu>
	  <sl-menu-item>
		  <sl-button-group label="Alignment">
			  <sl-button>Left</sl-button>
			  <sl-button>Center</sl-button>
			  <sl-button>Right</sl-button>
		  </sl-button-group>
	  </sl-menu-item>
	  <sl-menu-item>Dropdown Item 2</sl-menu-item>
	  <sl-menu-item>Dropdown Item 3</sl-menu-item>
  </sl-menu>
</sl-dropdown>

@tamara-nexus Can you provide an example of your code? It is quite hard to figure out what is going on just by pictures.

Are you using sl-menu & sl-menu-item? I'd imagine leaving those out could cause some unintended renderings.

[b-d-m-p]

I tried taking out sl-menu & sl-menu-item but I still didn't get the artifact. 🤔

[claviska]

Closing due to no response. If you're still having trouble with this, feel free to comment with an example and we'll reopen.