Skip to content

Fix text controls truncated when special characters are used#34061

Open
Xavrir wants to merge 2 commits intostorybookjs:nextfrom
Xavrir:fix/text-control-special-chars-31091
Open

Fix text controls truncated when special characters are used#34061
Xavrir wants to merge 2 commits intostorybookjs:nextfrom
Xavrir:fix/text-control-special-chars-31091

Conversation

@Xavrir
Copy link

@Xavrir Xavrir commented Mar 7, 2026

Closes #31091

What I did

Fixed text controls being truncated/reverted when users type special characters like /, ., @, *, etc.

Root cause: VALIDATION_REGEXP (/^[a-zA-Z0-9 _-]*$/) in validateArgs rejected any string value containing characters outside the basic alphanumeric set. When validation failed, the arg was silently omitted from the URL. On the next URL read, the control reverted to its initial value — appearing "truncated."

Fix: Split key vs value validation:

  • Keys keep the strict allowlist (KEY_REGEXP = /^[a-zA-Z0-9 _-]*$/) — arg names should remain predictable identifiers.
  • Values switch to a blocklist (UNSAFE_VALUE_REGEXP) that only rejects characters that would break parsing or enable injection:
    • ; and : — structural delimiters in the args format (key:value;key:value)
    • <, >, ", ` — HTML/script injection vectors
    • Control characters (\x00-\x1F, \x7F)

Both router/utils.ts and parseArgsParam.ts are updated in sync per the existing "keep in sync" comment.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

  1. Run a sandbox: yarn task --task sandbox --start-from auto --template react-vite/default-ts
  2. Open Storybook in your browser
  3. Navigate to any story with a text control (e.g. the Button story's label prop)
  4. Type special characters like user@example.com, path/to/file, image.png, Hello, world!
  5. Verify the text control preserves the full value (previously it would revert to the initial value on blur)
  6. Verify that values with <, >, ", or backticks are still rejected (security)

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update MIGRATION.MD

No documentation changes needed — this is a bugfix to internal validation logic.

Summary by CodeRabbit

  • Bug Fixes

    • Updated argument parsing and validation logic to refine handling of special characters in URL parameters and nested values.
    • Improved edge case handling for numeric values and structural delimiter detection.
    • Enhanced validation rules to allow common special characters while blocking unsafe ones.
  • Tests

    • Expanded test coverage for special character behavior in parameter values.

Split key vs value validation in validateArgs: keys keep strict
allowlist (alphanumeric + space/underscore/hyphen), while values
switch to a blocklist that only rejects structural delimiters (;:),
HTML-injection vectors (<>"`), and control chars. This allows
special characters like / * . @ in text control values without
silently dropping them from the URL args.

Closes storybookjs#31091
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 7, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 46968f8a-9982-428c-8bd4-ec6831e26a8d

📥 Commits

Reviewing files that changed from the base of the PR and between e68b5f8 and 2024bb8.

📒 Files selected for processing (4)
  • code/core/src/preview-api/modules/preview-web/parseArgsParam.test.ts
  • code/core/src/preview-api/modules/preview-web/parseArgsParam.ts
  • code/core/src/router/utils.test.ts
  • code/core/src/router/utils.ts

📝 Walkthrough

Walkthrough

The changes introduce new validation regexes (KEY_REGEXP, UNSAFE_VALUE_REGEXP) to differentiate sanitization rules for argument keys versus values across two utility modules. Tests are reorganized to reflect shifted expectations: while structural delimiters remain blocked, additional special characters are now permitted in values. Numeric edge cases are reinterpreted as strings.

Changes

Cohort / File(s) Summary
Preview Web Module Implementation
code/core/src/preview-api/modules/preview-web/parseArgsParam.ts
Introduced KEY_REGEXP and UNSAFE_VALUE_REGEXP constants. Replaced multi-regex validation with simplified UNSAFE_VALUE_REGEXP check for string values. Updated comments for null/undefined and Date handling.
Preview Web Module Tests
code/core/src/preview-api/modules/preview-web/parseArgsParam.test.ts
Reorganized and expanded test groups to differentiate sanitization for keys vs. values. Added explicit structural delimiter checks. Replaced prior invalid-value tests with broader character allowance while maintaining restrictions on certain delimiters. Updated numeric edge-case expectations to treat outputs as strings.
Router Utilities Implementation
code/core/src/router/utils.ts
Replaced VALIDATION_REGEXP with KEY_REGEXP for key validation. Added UNSAFE_VALUE_REGEXP constant. Simplified string value validation logic with negated UNSAFE_VALUE_REGEXP test. Adjusted inline comments.
Router Utilities Tests
code/core/src/router/utils.test.ts
Added new test suite "special characters in values" for buildArgsParam. Verifies preservation of slashes, dots, @ symbols, and common punctuation. Includes negative tests for semicolons, colons, angle brackets, double quotes, and backticks.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.


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

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

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.

[Bug]: Text controls truncated when special characters are used.

1 participant