Skip to content

fix: prevent tag removal via backspace when readOnly is enabled #8069

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

naaa760
Copy link

@naaa760 naaa760 commented Jul 10, 2025

#8066

Problem

The TagsInput component with readOnly={true} was incorrectly allowing users to remove tags by pressing backspace when the input field was focused. This violated the expected read-only behavior where no modifications should be possible.

Root Cause

Multiple input event handlers were missing readOnly property checks, allowing tag modifications even when the component was supposed to be read-only.

Solution

Added readOnly checks to all input handlers that can modify tags:

  • ✅ Backspace key (tag removal)
  • ✅ Enter key (tag addition)
  • ✅ Split characters like comma (tag addition)
  • ✅ Paste events (tag addition)
  • ✅ Blur with acceptValueOnBlur (tag addition)
  • ✅ Dropdown option selection (tag addition)

Testing

  • Added 6 comprehensive test cases covering all input scenarios
  • All existing tests continue to pass (62/62)
  • Verified behavior matches other Mantine read-only components

-readonly-backspace
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