feat(conform-react): useInputEvent API

[edmundhung]

Introducing the useInputEvent() hook

This APIs has several improvements over useControlledInput():

• It no longer enforces creating a shadow input element
• Use your own value instead of built-in value state
• Explicit focus forwarding for flexiblity
• Wider event type support, e.g. focus-in / focus / focus-out / change (react-only)

// Before
function ExampleAutocomplete({ label, error, ...config }: FieldProps<string>) {
    const [shadowInput, control] = useControlledInput(config);

    return (
        <>
            <input {...shadowInput} />
            <Autocomplete
                disablePortal
                options={['The Godfather', 'Pulp Fiction']}
                value={control.value}
                onChange={(_, option) => control.change(`${option ?? ''}`)}
                renderInput={(params) => (
                    <TextField
                        {...params}
                        label={label}
                        inputRef={control.ref}
                        onBlur={control.blur}
                        error={Boolean(error)}
                        helperText={error}
                        required={config.required}
                        inputProps={{
                            ...params.inputProps,
                            // To disable error bubble caused by the constraint
                            // attribute set by mui input, e.g. `required`
                            required: false,
                        }}
                    />
                )}
            />
        </>
    );
}

// After - To achieve exactly the same features as before
function ExampleAutocomplete({ label, error, ...config }: FieldProps<string>) {
    const [value, setValue] = useState(config.defaultValue ?? '');
    const [ref, control] = useInputEvent({
        onReset: () => setValue(config.defaultValue ?? ''),
    });
    const inputRef = useRef<HTMLInputElement>();

    return (
        <>
            <input
                ref={ref}
                {...conform.input(config, { hidden: true })}
                onFoucs={() => inputRef.current?.focus()}
            />
            <Autocomplete
                disablePortal
                options={['The Godfather', 'Pulp Fiction']}
                value={value}
                onChange={(_, option) => {
                    control.change(`${option ?? ''}`);
                    setValue(option);
                }}
                onFocus={control.focus}
                onBlur={control.blur}
                renderInput={(params) => (
                    <TextField
                        {...params}
                        inputRef={inputRef}
                        label={label}
                        error={Boolean(error)}
                        helperText={error}
                        required={config.required}
                        inputProps={{
                            ...params.inputProps,
                            required: false,
                        }}
                    />
                )}
            />
        </>
    );
}

// After - To reuse existing input element if possible
function ExampleAutocomplete({ label, error, ...config }: FieldProps<string>) {
    const [value, setValue] = useState(config.defaultValue ?? '');
    const [inputRef, control] = useInputEvent({
        onReset: () => setValue(config.defaultValue ?? ''),
    });

    return (
        <Autocomplete
            disablePortal
            options={['The Godfather', 'Pulp Fiction']}
            value={value}
            onChange={(_, option) => {
                control.change(`${option ?? ''}`);
                setValue(option);
            }}
            onFocus={control.focus}
            onBlur={control.blur}
            renderInput={(params) => (
                <TextField
                    {...params}
                    inputRef={inputRef}
                    label={label}
                    error={Boolean(error)}
                    helperText={error}
                    required={config.required}
                    inputProps={{
                        ...params.inputProps,
                        required: false,
                    }}
                />
            )}
        />
    );
}

// After - If there is no need to support form reset event, you can also use the defaultValue
function ExampleAutocomplete({ label, error, ...config }: FieldProps<string>) {
    const [inputRef, control] = useInputEvent();

    return (
        <Autocomplete
            disablePortal
            options={['The Godfather', 'Pulp Fiction']}
            defaultValue={config.defaultValue ?? ''}
            onChange={(_, option) => control.change(`${option ?? ''}`)}
            onFocus={control.focus}
            onBlur={control.blur}
            renderInput={(params) => (
                <TextField
                    {...params}
                    inputRef={inputRef}
                    label={label}
                    error={Boolean(error)}
                    helperText={error}
                    required={config.required}
                    inputProps={{
                        ...params.inputProps,
                        required: false,
                    }}
                />
            )}
        />
    );
}

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[cloudflare-pages]

Deploying with    Cloudflare Pages

Latest commit:	a4a3993
Status:	✅  Deploy successful!
Preview URL:	https://dfa4a45f.conform.pages.dev
Branch Preview URL:	https://better-integration.conform.pages.dev

View logs

[edmundhung]

This API will probably be released on 0.5.1, while the useControlledInput API will be deprecated and removed on 0.6.