fix(button): prevent pointer interaction of child/slotted content

adobe · Mar 15, 2024 · 2cd5823 · 2cd5823
1 parent d9abed7
commit 2cd5823
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 0 deletions.
diff --git a/packages/action-group/test/action-group.test.ts b/packages/action-group/test/action-group.test.ts
@@ -82,6 +82,7 @@ async function singleSelectedActionGroup(
                     First
                 </sp-action-button>
                 <sp-action-button value="second" class="second">
+                    <div slot="icon" style="width: 10px; height: 10px;"></div>
                     Second
                 </sp-action-button>
             </sp-action-group>
@@ -659,6 +660,54 @@ describe('ActionGroup', () => {
         expect(secondButton.selected, 'second button selected').to.be.true;
     });
 
+    it('does not allow interaction with child content to interupt the selection mechanism', async () => {
+        const el = await singleSelectedActionGroup([]);
+        await elementUpdated(el);
+        expect(el.selected.length).to.equal(0);
+
+        const firstButton = el.querySelector('.first') as ActionButton;
+        const secondButton = el.querySelector('.second') as ActionButton;
+        const icon = secondButton.querySelector('[slot=icon]') as HTMLElement;
+        expect(firstButton.selected, 'first button selected').to.be.false;
+        expect(secondButton.selected, 'second button not selected').to.be.false;
+
+        secondButton.click();
+        await elementUpdated(el);
+
+        expect(el.selected.length).to.equal(1);
+        expect(el.selected).to.deep.equal(['second']);
+        expect(firstButton.selected, 'first button not selected').to.be.false;
+        expect(secondButton.selected, 'second button selected').to.be.true;
+
+        firstButton.click();
+        await elementUpdated(el);
+
+        expect(el.selected.length).to.equal(1);
+        expect(el.selected).to.deep.equal(['first']);
+        expect(firstButton.selected, 'first button not selected').to.be.true;
+        expect(secondButton.selected, 'second button selected').to.be.false;
+
+        const rect = icon.getBoundingClientRect();
+        await sendMouse({
+            steps: [
+                {
+                    type: 'click',
+                    position: [
+                        rect.left + rect.width / 2,
+                        rect.top + rect.height / 2,
+                    ],
+                },
+            ],
+        });
+        icon.click();
+        await elementUpdated(el);
+
+        expect(el.selected.length).to.equal(1);
+        expect(el.selected).to.deep.equal(['second']);
+        expect(firstButton.selected, 'first button not selected').to.be.false;
+        expect(secondButton.selected, 'second button selected').to.be.true;
+    });
+
     it('selects user-passed value while [selects="multiple"]', async () => {
         const el = await fixture<ActionGroup>(
             html`

diff --git a/packages/button/src/button-base.css b/packages/button/src/button-base.css
@@ -47,6 +47,10 @@ governing permissions and limitations under the License.
     pointer-events: none;
 }
 
+::slotted(*) {
+    pointer-events: none;
+}
+
 slot[name='icon']::slotted(svg),
 slot[name='icon']::slotted(img) {
     fill: currentcolor;