[Bug]: cursor jumps to end of input when editing, when using useArgs

[emlai]

Describe the bug

When using useArgs in a story, with the value prop of a simple <input> in the args, editing the input in the middle causes the cursor to move to the end.

Using React.useState instead useArgs, the cursor behaves normally. (but then the SB controls won't be updated when editing the input field.)

Also on the Docs page, the non-primary stories' <input> fields cannot be edited at all.

To Reproduce

https://stackblitz.com/edit/github-4dcmyf?file=src%2Fstories%2FTextField.stories.jsx&preset=node

export const TextField = (props) => <input {...props} />;

export const UseArgs = {
  render: () => {
    const [args, setArgs] = useArgs();
    return (
      <TextField
        {...args}
        onChange={(e) => setArgs({ value: e.target.value })}
      />
    );
  },
  args: { value: 'test' },
};

System

Reproduced on 8.0.0-alpha.11 and 7.6.10.

Additional context

No response

[Satya-Manikanta]

Hi @emlai

The below code using useArgs() working for me. Once try this and check whether this solves the issue

export const UseArgs2 = {
  Render: () => {
    const [args, setArgs] = useArgs();
    return (
      <TextField
        {...args}
        onChange={(e) => setArgs({ value: e.target.value })}
      />
    );
  },
  args: { defaultValue: 'test' },
};

@shilman, if you do have additional inputs please do provide them...

[emlai]

You wrote Render instead of render so the function is not being used. If you replace it with render then the issue reproduces.

[Satya-Manikanta]

Hi @emlai,

When I am using the code (i.e., the code in the sandbox link) you have provided, I got the below error message to change it to capital Render

Can you please provide the steps to reproduce using render.

[jussirantala]

@Satya-Manikanta It's reproduced in the sandbox which means you are having a local issue of some kind. If you are having problems using Storybook, you could ask for help in Stack overflow for example.

[emlai]

When I am using the code (i.e., the code in the sandbox link) you have provided, I got the below error message to change it to capital Render

That's a false positive eslint warning. See #21115. You can ignore it, or work around it with:

render: function Render(args) {

[Pashkella]

Disable react-hooks/rules-of-hooks in ESLint config

overrides: [
    {
        files: ["**/*.stories.tsx"],
        rules: {
            "react-hooks/rules-of-hooks": "off",
        },
    },
],

[umangxrana]

Hi @emlai i have resolved the bug please access it at :-
https://stackblitz.com/~/github.com/umangxrana/Bug-25673