Skip to content

Fix controlled input state not reflecting in the input#239

Open
matiasperz wants to merge 3 commits intosadmann7:mainfrom
matiasperz:main
Open

Fix controlled input state not reflecting in the input#239
matiasperz wants to merge 3 commits intosadmann7:mainfrom
matiasperz:main

Conversation

@matiasperz
Copy link

@matiasperz matiasperz commented Dec 29, 2025

This PR adds controlled mode support for the Mention component, allowing external state management of the open state, selected values, and input value. It includes a new demo showcasing the controlled usage pattern along with necessary bug fixes to properly sync controlled state.

Changes

New Features

  • Controlled Demo (mention-controlled-demo.tsx): Added a new example demonstrating fully controlled usage of the Mention component in a message-sending interface. The demo shows:
    • Controlled open, value, and inputValue state
    • A message list that renders sent messages with highlighted mentions
    • Programmatic state reset after sending

Bug Fixes

mention-input.tsx:

  • Added useEffect to sync the controlled inputValue prop to the actual input DOM element, ensuring the input reflects external state changes
  • Added context.onValueChange to the dependency array for proper state synchronization

mention-highlighter.tsx:

  • Changed from reading value directly from inputElement to using context.inputValue for consistent behavior with controlled mode
  • Added validation to filter out mentions with invalid positions (start/end bounds checking) to prevent rendering errors

Documentation

  • Added "Controlled" section to the Mention component documentation with the new demo

- Introduced a new demo for controlled mentions, showcasing user interactions with mentions in a chat-like interface.
- Updated the registry to include the new demo and its dependencies.
- Enhanced documentation to include the new demo under the mentions section, providing users with a clear example of usage.
- Added necessary JSON files for the new demo in the public registry.
@vercel
Copy link
Contributor

vercel bot commented Dec 29, 2025

@matiasperz is attempting to deploy a commit to the sadmann7 Team on Vercel.

A member of the Team first needs to authorize it.

@matiasperz matiasperz marked this pull request as ready for review December 29, 2025 16:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant