-
Couldn't load subscription status.
- Fork 75
Description
Not sure if this is intentional, but I see here partitionFieldProps sets value = '' for all form fields every time they render:
lunar/packages/core/src/components/FormField/partitionFieldProps.ts
Lines 68 to 71 in e378004
| 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.