fix positioning of native inputs; closes #1169

docs/resources/changelog.md

@@ -13,6 +13,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a bug in `<sl-color-picker>` that prevented `sl-change` and `sl-input` from emitting when using the eye dropper [#1157](https://github.com/shoelace-style/shoelace/issues/1157)
 - Fixed a bug in `<sl-dropdown>` that prevented keyboard users from selecting menu items when using the keyboard [#1165](https://github.com/shoelace-style/shoelace/issues/1165)
 - Fixed a bug in the template for `<sl-select>` that caused the `form-control-help-text` part to not be in the same location as other form controls [#1178](https://github.com/shoelace-style/shoelace/issues/1178)
+- Fixed a bug in `<sl-checkbox>` and `<sl-switch>` that caused the browser to scroll incorrectly when focusing on a control in a container with overflow [#1169](https://github.com/shoelace-style/shoelace/issues/1169)
 
 ## 2.0.0
 

src/components/checkbox/checkbox.styles.ts

@@ -9,6 +9,7 @@ export default css`
   }
 
   .checkbox {
+    position: relative;
     display: inline-flex;
     align-items: top;
     font-family: var(--sl-input-font-family);

src/components/checkbox/checkbox.test.ts

@@ -94,6 +94,21 @@ describe('<sl-checkbox>', () => {
     await el.updateComplete;
   });
 
+  it('should hide the native input with the correct positioning to scroll correctly when contained in an overflow', async () => {
+    //
+    // See: https://github.com/shoelace-style/shoelace/issues/1169
+    //
+    const el = await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `);
+    const label = el.shadowRoot!.querySelector('.checkbox')!;
+    const input = el.shadowRoot!.querySelector('.checkbox__input')!;
+
+    const labelPosition = getComputedStyle(label).position;
+    const inputPosition = getComputedStyle(input).position;
+
+    expect(labelPosition).to.equal('relative');
+    expect(inputPosition).to.equal('absolute');
+  });
+
   describe('when submitting a form', () => {
     it('should submit the correct value when a value is provided', async () => {
       const form = await fixture<HTMLFormElement>(html`

src/components/switch/switch.styles.ts

@@ -33,6 +33,7 @@ export default css`
   }
 
   .switch {
+    position: relative;
     display: inline-flex;
     align-items: center;
     font-family: var(--sl-input-font-family);

src/components/switch/switch.test.ts

@@ -113,6 +113,21 @@ describe('<sl-switch>', () => {
     await el.updateComplete;
   });
 
+  it('should hide the native input with the correct positioning to scroll correctly when contained in an overflow', async () => {
+    //
+    // See: https://github.com/shoelace-style/shoelace/issues/1169
+    //
+    const el = await fixture<SlSwitch>(html` <sl-switch></sl-switch> `);
+    const label = el.shadowRoot!.querySelector('.switch')!;
+    const input = el.shadowRoot!.querySelector('.switch__input')!;
+
+    const labelPosition = getComputedStyle(label).position;
+    const inputPosition = getComputedStyle(input).position;
+
+    expect(labelPosition).to.equal('relative');
+    expect(inputPosition).to.equal('absolute');
+  });
+
   describe('when submitting a form', () => {
     it('should submit the correct value when a value is provided', async () => {
       const form = await fixture<HTMLFormElement>(html`