Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[Suggestion] Remove setting value: '' for all input fields #336

@ktmud

Description

@ktmud

Not sure if this is intentional, but I see here partitionFieldProps sets value = '' for all form fields every time they render:

inputProps: {
value: '',
...inputProps,
disabled,

This basically makes an input unusable without a state bind to input.value. Even the most basic input example in the Storybook does not work (users cannot type anything).

It's generally a bad practice to write what users typed right back into an input. It triggers an unnecessary re-render, increases the risk of circular callbacks and greatly increases code complexity. For example, a PR in Bighead had to introduced a new state just to use a debounced onChange handler.

Code as simple as

export default function DebouncedInput(props: DebouncedInputProps) {
  const { onChange, debounceTime = 150, ...restProps } = props;
  const handleChange = debounce(onChange, debounceTime);
  return <Input {...restProps} onChange={handleChange} />;
};

had to change to

export default function DebouncedInput(props: DebouncedInputProps) {
  const { onChange, debounceTime = 150, ...restProps } = props;
  const [value, setValue] = useState(restProps.value);
  const handleChange = debounce(onChange, debounceTime);

  return <Input {...restProps} value={value} onChange={(
    newValue: string,
    event: React.ChangeEvent<HTMLInputElement>
  ) => { 
    setValue(newValue);
    handleChange(newValue, event);
  }} />;
}

And most importantly, manually setting user input as users type has the side effect of interfering with other native browser behaviors, breaking things like autocomplete and foreign language input (I've seen such bugs many many times).

In case a clean input is desired, developers should provide value="" themselves.


The fix is as simple as remove value: ''. If this change would break current developer expectations or other features, it's the best to at least provide an option to disable this behavior.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions