Skip to content

[PLAY-3150] Dropdown: Add react hook form support - #6544

Closed
nidaqg wants to merge 4 commits into
masterfrom
play/3150
Closed

[PLAY-3150] Dropdown: Add react hook form support#6544
nidaqg wants to merge 4 commits into
masterfrom
play/3150

Conversation

@nidaqg

@nidaqg nidaqg commented Aug 24, 2026

Copy link
Copy Markdown
Contributor

PLAY-3150

Adds react-Hook-form control to Dropdown kit.

Screenshots: Screenshots to visualize your addition/change

Screenshot 2026-08-24 at 11 52 45 AM Screenshot 2026-08-24 at 11 52 42 AM

How to test? Steps to confirm the desired behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See addition/change

Checklist:

  • LABELS Add a label: enhancement, bug, improvement, new kit, deprecated, or breaking. See Changelog & Labels for details.
  • DEPLOY I have added the milano label to show I'm ready for a review.
  • TESTS I have added test coverage to my code.
  • PLAYGROUND I have added and tested Playground metadata and overrides for all kits and props updated in my code.
  • SEMVER I have added a minor, major, or patch label for release.
  • RC I have added an inactive RC label if not an active RC.

@nidaqg nidaqg self-assigned this Aug 24, 2026
@nidaqg
nidaqg requested review from a team as code owners August 24, 2026 15:40
@nidaqg nidaqg added enhancement New Features, Props, & Variants (USED IN CHANGELOG) milano 20 MAX - Deploy this PR to a review environment via Milano minor Semver Target labels Aug 24, 2026
@powerhome-portal

Copy link
Copy Markdown

A change to documentation files was detected in your PR. Please visit this link to preview changes: https://portal-staging.powerapp.cloud/docs?filters[kind]=all&filters[user]=all&filters[namespaceFilter]=play-3150

@nitro-pr-review nitro-pr-review Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Selection onChange wiring for react-hook-form looks sound and preserves existing onSelect behavior. The new onBlur forwarding does not match that event shape, so register's blur/touched path will not bind to the field.

Comment thread playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx Outdated

@nitro-pr-review nitro-pr-review Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks sound overall: onSelect behavior is preserved, onChange uses the same { target: { name, value } } shape as other form kits, and the new tests cover select, clear, multi-select, and autocomplete. No blocking correctness issues in expected usage.

@nidaqg

nidaqg commented Aug 25, 2026

Copy link
Copy Markdown
Contributor Author

All commits cherry-picked to #6538 for combined ninja testing

@nidaqg

nidaqg commented Aug 27, 2026

Copy link
Copy Markdown
Contributor Author

Since all code here ported over to #6538, closing this PR in favor of shipping the combined PR

@nidaqg nidaqg closed this Aug 27, 2026
nickamantia added a commit that referenced this pull request Aug 31, 2026
…eact Hook Form Support for React (#6538)

[PLAY-3149](https://runway.powerhrg.com/backlog_items/PLAY-3149)

This PR also contains all code from
[PLAY-3150](#6544), cherry
picked over for safer testing and merging.

<img width="1185" height="772" alt="Screenshot 2026-08-21 at 2 59 35 PM"
src="https://github.com/user-attachments/assets/b8d37f5c-4cf0-4e98-a7d6-03d9eb72eb2c"
/>

This PR brings over the dynamic options from the typeahead kit to the
dropdown kit.
New props include:
`options_by_context`
`context_selector`
`clear_on_context_change`
`options_event_type`

They are slightly re-named from the typeahead kit just to fit in better
with the dropdown.

As stated above, this PR also contains all code from PLAY-3150 which
adds react hook form support to the React Dropdown kit.

**How to test?** Steps to confirm the desired behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See addition/change


#### Checklist:
- [ ] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [ ] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [ ] **TESTS** I have added test coverage to my code.
- [ ] **PLAYGROUND** I have added and tested Playground metadata and
overrides for all kits and props updated in my code.
- [ ] **SEMVER** I have added a `minor`, `major`, or `patch` label for
release.
- [ ] **RC** I have added an `inactive RC` label if not an active RC.

---------

Co-authored-by: nidaqg <nidaqg@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

agentic-review enhancement New Features, Props, & Variants (USED IN CHANGELOG) milano 20 MAX - Deploy this PR to a review environment via Milano minor Semver Target

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants