diff --git a/labs/gb/components/splitbutton/split-button-element.ts b/labs/gb/components/splitbutton/split-button-element.ts index c4184f55f4..815b186793 100644 --- a/labs/gb/components/splitbutton/split-button-element.ts +++ b/labs/gb/components/splitbutton/split-button-element.ts @@ -52,6 +52,15 @@ export class SplitButtonElement extends LitElement { } .split-btn { flex: 1; + /* Contains the slots' touch targets (::before, absolute). The leading + slot is display: contents, so without this its touch target sizes + against the viewport and covers the page. */ + position: relative; + } + /* The menu icon is the trailing slot's ::after, painted over the + slotted button: clicks pass through to the button. */ + [name='trailing']::after { + pointer-events: none; } [name='leading'] { display: contents; @@ -90,7 +99,8 @@ export class SplitButtonElement extends LitElement { part="leading-btn" class="${button(buttonConfig)}" @focusin=${this.updateSlotFocusVisible} - @focusout=${this.updateSlotFocusVisible}> + @focusout=${this.updateSlotFocusVisible} + @click=${this.forwardSlotClick}> `; } + /** + * A click on a slot's own box (its 48dp touch target, outside the slotted + * button) activates that slot's button, as a tap on the touch target of a + * button does. + */ + private forwardSlotClick(event: MouseEvent) { + const slot = event.currentTarget as HTMLSlotElement; + if (event.target !== slot) return; + const target = slot + .assignedElements() + .find((el): el is HTMLButtonElement => el.matches('button')); + if (!target || target.disabled) return; + event.stopPropagation(); + target.click(); + } + private updateSlotFocusVisible(event: Event) { const slot = event.currentTarget as HTMLSlotElement; const hasFocusVisible = slot