Skip to content

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

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
GeorgeBatt-SV opened this issue Apr 8, 2025 · 2 comments
Open

Comments

@GeorgeBatt-SV
Copy link

GeorgeBatt-SV commented Apr 8, 2025

Describe the bug

When entering content into a text-based control, if the content contains a special character, the text is truncated when the input loses focus. The story component itself does not reflect this truncation. This occurs on clean Storybook instances.

I've found this to be the case in version 8.5.0-beta.10 onwards. 8.5.0-beta.9 does not seem to exhibit the issue.

Reproduction link

https://codesandbox.io/p/devbox/3j3tsg

Reproduction steps

  1. Go to the reproduction link
  2. Navigate to the Button -> Primary story
  3. Edit the "label" control, enter "Button/Test"
  4. Tab away from the input
  5. Everything from the "/" onwards is removed from the input.

System

Storybook Environment Info:

  System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (2) x64 AMD EPYC
    Shell: Unknown
  Binaries:
    Node: 20.12.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.5.0 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/share/npm-global/bin/pnpm <----- active
  npmPackages:
    @storybook/addon-essentials: ^8.6.12 => 8.6.12 
    @storybook/addon-onboarding: ^8.6.12 => 8.6.12 
    @storybook/blocks: ^8.6.12 => 8.6.12 
    @storybook/experimental-addon-test: ^8.6.12 => 8.6.12 
    @storybook/react: ^8.6.12 => 8.6.12 
    @storybook/react-vite: ^8.6.12 => 8.6.12 
    @storybook/test: ^8.6.12 => 8.6.12 
    eslint-plugin-storybook: ^0.12.0 => 0.12.0 
    storybook: ^8.6.12 => 8.6.12

Additional context

No response

@domingasp
Copy link

I can confirm I am experiencing the same problem.

// text control
SELECT * FROM
// on blur
SELECT *

I think it's caused by storybook attempting to save the params to the URL as the following case works as text only input works fine

@encryptedDegen
Copy link

I am having the same issue, however it is only happening on half of my storybook stories.

Example

  • input: name.eth
  • on blur: name.

@domingasp I agree with you, definitely because of storing into the URL (probs to prevent XSS attacks), however, some of my stories don't have this issue. I am still trying to find the difference between the working ones and the ones that are hitting the URL issue, settings are the same, maybe something to do with param types of the components.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants