feat(core): Add keyboard and focus events to form components

[QuintonJason]

Description

Pine form components use Shadow DOM, which means native DOM events like blur, focus, and keydown don't reliably bubble across the shadow boundary to external JavaScript frameworks (e.g., Stimulus, React event delegation).
While pds-input and pds-textarea already had pdsBlur and pdsFocus, they were missing pdsKeyDown. The pds-select component was missing all three. This caused issues in consuming applications where:

• Enter key handlers wouldn't fire (e.g., submit search on Enter)
• Blur-triggered validation/submission failed silently
• Focus-based UI logic couldn't detect select interactions

Fixes DSS-74

• Add pdsKeyDown event to pds-input for keyboard interaction handling
• Add pdsKeyDown event to pds-textarea for keyboard interaction handling
• Add pdsBlur, pdsFocus, and pdsKeyDown events to pds-select for complete event parity

Type of change

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Can be tested by testing a consuming stimulus form that filters a list

• unit tests
• e2e tests
• accessibility tests
• tested manually
• other:

Test Configuration:

• Pine versions:
• OS:
• Browsers:
• Screen readers:
• Misc:

Checklist:

If not applicable, leave options unchecked.

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing tests pass locally with my changes
• Design has QA'ed and approved this PR

[netlify]

✅ Deploy Preview for pine-design-system ready!

Name	Link
🔨 Latest commit	13316d1
🔍 Latest deploy log	https://app.netlify.com/projects/pine-design-system/deploys/6967bcb84f429900089b68ae
😎 Deploy Preview	https://deploy-preview-636--pine-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[QuintonJason]

@coderabbitai review this pr

[coderabbitai]

@QuintonJason I'll review this PR for you. Let me analyze the changes to add keyboard and focus events to the Pine form components.

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request adds new keyboard and focus event listeners across three form components. PdsInput, PdsSelect, and PdsTextarea components now emit a pdsKeyDown event of type KeyboardEvent when keyboard input occurs. Additionally, PdsSelect gains pdsBlur and pdsFocus events of type FocusEvent to expose focus interactions. The changes include updating TypeScript type definitions in components.d.ts, adding event handler methods that emit the new events, wiring these handlers to underlying DOM elements, updating component documentation, and adding test cases to verify the new event emissions. The pdsSelectChange event description is also corrected to accurately reflect value-change behavior.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: adding keyboard and focus events to form components (pds-input, pds-textarea, and pds-select).
Description check	✅ Passed	The description covers the main objective and motivation but is missing several key checklist items and test configuration details.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

🧹 Recent nitpick comments

libs/core/src/components/pds-input/pds-input.tsx (1)

82-86: Nice addition: pdsKeyDown is cleanly forwarded from the native <input>’s keydown.
One small ergonomics note: since you’re emitting a CustomEvent whose detail is the original KeyboardEvent, consumers who want to cancel behavior will need to call event.detail.preventDefault() (not event.preventDefault()). Consider calling that out in docs (or a test) to reduce integration confusion.

Also applies to: 397-400, 547-547

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9e9bd8e and 13316d1.

📒 Files selected for processing (10)

• libs/core/src/components.d.ts
• libs/core/src/components/pds-input/pds-input.tsx
• libs/core/src/components/pds-input/readme.md
• libs/core/src/components/pds-input/test/pds-input.spec.tsx
• libs/core/src/components/pds-select/pds-select.tsx
• libs/core/src/components/pds-select/readme.md
• libs/core/src/components/pds-select/test/pds-select.spec.tsx
• libs/core/src/components/pds-textarea/pds-textarea.tsx
• libs/core/src/components/pds-textarea/readme.md
• libs/core/src/components/pds-textarea/test/pds-textarea.spec.tsx

🧰 Additional context used

🧬 Code graph analysis (6)

libs/core/src/components/pds-input/pds-input.tsx (2)

libs/core/src/components.d.ts (1)

• Event (19-19)

libs/react/src/components/react-component-lib/interfaces.ts (1)

• EventEmitter (2-4)

libs/core/src/components/pds-select/pds-select.tsx (3)

libs/core/src/components.d.ts (1)

• Event (19-19)

libs/react/src/components/react-component-lib/interfaces.ts (1)

• EventEmitter (2-4)

libs/core/src/components/pds-input/input-interface.ts (1)

• InputEvent (11-14)

libs/core/src/components/pds-textarea/pds-textarea.tsx (2)

libs/core/src/components.d.ts (1)

• Event (19-19)

libs/react/src/components/react-component-lib/interfaces.ts (1)

• EventEmitter (2-4)

libs/core/src/components/pds-input/test/pds-input.spec.tsx (1)

libs/react/src/components/proxies.ts (1)

• PdsInput (73-73)

libs/core/src/components/pds-textarea/test/pds-textarea.spec.tsx (1)

libs/react/src/components/proxies.ts (1)

• PdsTextarea (100-100)

libs/core/src/components/pds-select/test/pds-select.spec.tsx (1)

libs/react/src/components/proxies.ts (1)

• PdsSelect (86-86)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: test-specs (18)
• GitHub Check: test-specs (22)
• GitHub Check: test-specs (20)

🔇 Additional comments (18)

libs/core/src/components.d.ts (6)

2360-2366: Good: pdsKeyDown is correctly added to HTMLPdsInputElementEventMap.
This makes addEventListener('pdsKeyDown', ...) type-safe and matches the intended KeyboardEvent payload.

---

2499-2504: Good: pdsBlur / pdsFocus / pdsKeyDown are correctly added to HTMLPdsSelectElementEventMap.
Type-wise this is consistent with exposing focus/keyboard interactions from the Shadow DOM-wrapped select.

---

2675-2681: Good: pdsKeyDown is correctly added to HTMLPdsTextareaElementEventMap.
Keeps textarea parity with input/select for keyboard handling.

---

3957-3961: Good: LocalJSX.PdsInput now exposes onPdsKeyDown with the right generic.
(event: PdsInputCustomEvent<KeyboardEvent>) => void matches the EventMap addition.

---

4368-4382: Good: LocalJSX.PdsSelect now exposes onPdsBlur / onPdsFocus / onPdsKeyDown.
Signatures line up with the FocusEvent / KeyboardEvent event map entries.

---

4784-4787: Good: LocalJSX.PdsTextarea now exposes onPdsKeyDown with the right generic.

libs/core/src/components/pds-textarea/readme.md (1)

33-40: Docs look consistent: pdsKeyDown is added with CustomEvent<KeyboardEvent>.

libs/core/src/components/pds-select/readme.md (1)

27-35: Docs look consistent: pdsBlur / pdsFocus / pdsKeyDown are documented with correct event types.

libs/core/src/components/pds-input/readme.md (1)

37-46: Docs look correct: pdsKeyDown is added with CustomEvent<KeyboardEvent>.

libs/core/src/components/pds-textarea/test/pds-textarea.spec.tsx (1)

463-501: LGTM! Well-structured tests for pdsKeyDown event.

The tests properly verify both event emission and payload correctness. The pattern of using CustomEvent<KeyboardEvent> and accessing e.detail to retrieve the emitted KeyboardEvent aligns with how Stencil's EventEmitter works.

libs/core/src/components/pds-select/test/pds-select.spec.tsx (1)

622-696: LGTM! Comprehensive event emitter tests for pds-select.

The test suite properly covers all three new events (pdsBlur, pdsFocus, pdsKeyDown) with both basic emission verification and payload validation. The tests are consistent with the patterns used in pds-input and pds-textarea test files.

libs/core/src/components/pds-input/test/pds-input.spec.tsx (1)

449-487: LGTM! Consistent pdsKeyDown tests matching the component's event API.

The tests properly complement the existing pdsBlur and pdsFocus tests (lines 414-447) and follow the same established patterns used throughout the test file.

libs/core/src/components/pds-select/pds-select.tsx (3)

94-112: LGTM! Clean event declarations with accurate documentation.

Good fix on the pdsSelectChange description — it correctly now states "Emitted when the select value changes" rather than the previous misleading description. The new event declarations follow Stencil conventions and are consistent with the existing event API in pds-textarea.

---

202-212: LGTM! Straightforward event handler implementations.

The handlers simply emit the native events, which is the correct approach for exposing DOM events across the shadow boundary.

---

380-383: LGTM! Event handlers properly wired to the select element.

The handlers are correctly bound alongside the existing onChange handler.

libs/core/src/components/pds-textarea/pds-textarea.tsx (3)

62-65: LGTM! pdsKeyDown event declaration follows established patterns.

The event declaration is consistent with the existing pdsBlur and pdsFocus events in this component.

---

295-297: LGTM! Simple and correct handler implementation.

---

528-528: LGTM! Handler properly wired to the native textarea.

The onKeyDown handler is correctly placed alongside the other event handlers (onBlur, onChange, onFocus, onInput).

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}