diff --git a/.changeset/cute-baths-prove.md b/.changeset/cute-baths-prove.md new file mode 100644 index 0000000000..712b089f09 --- /dev/null +++ b/.changeset/cute-baths-prove.md @@ -0,0 +1,5 @@ +--- +'@solid-design-system/components': patch +--- + +Fixed `sd-textarea` textarea focus handling when clicking the floating label. diff --git a/packages/components/src/components/textarea/textarea.test.ts b/packages/components/src/components/textarea/textarea.test.ts index 653efcda6a..c7b2aa2c53 100644 --- a/packages/components/src/components/textarea/textarea.test.ts +++ b/packages/components/src/components/textarea/textarea.test.ts @@ -369,4 +369,23 @@ describe('', () => { expect(textarea.spellcheck).to.be.false; }); }); + + it('should focus the textarea when clicking on the floating label or its span', async () => { + const el = await fixture(html` `); + await el.updateComplete; + + const label = el.shadowRoot!.querySelector('label[part="form-control-floating-label"]')! as HTMLElement; + const textarea = el.shadowRoot!.querySelector('textarea')!; + + const focusSpy = sinon.spy(); + textarea.addEventListener('focus', focusSpy); + + // Click on the label itself + label.click(); + await waitUntil(() => focusSpy.calledOnce, 'textarea did not focus on label click'); + expect(focusSpy).to.have.been.calledOnce; + expect(textarea).to.equal(el.shadowRoot!.activeElement); + + focusSpy.resetHistory(); + }); }); diff --git a/packages/components/src/components/textarea/textarea.ts b/packages/components/src/components/textarea/textarea.ts index 88a62fc022..ae0da31cbd 100644 --- a/packages/components/src/components/textarea/textarea.ts +++ b/packages/components/src/components/textarea/textarea.ts @@ -399,7 +399,7 @@ export default class SdTextarea extends SolidElement implements SolidFormControl id="label" part="form-control-floating-label" class=${cx( - 'absolute left-4 z-20 pointer-events-none transition-all duration-200', + 'absolute left-4 z-20 transition-all duration-200 cursor-text', textSize, !isFloatingLabelActive ? 'top-2.5' : 'top-2 text-xs' )}