onChange is not working

Forge
1

I’m trying to create a custom field type on Forge and want to use onChange to validate user input

But it doesn’t work at all and gives no error.

I tried a few different things but nothing really worked. Here’s my edit.jsx:

import ForgeUI, {CustomFieldEdit, TextField, useProductContext, useState} from "@forge/ui";

export const Edit = () => {
    const {extensionContext: {fieldValue}} = useProductContext();
    const [error, setError] = useState('');
    const [inputValue, setInputValue] = useState("initial")

    const handleInputChange = (event) => {
        console.log(`triggered`);
        const value = event.target.value;
        setInputValue(value);
        if (event.target.value.length < 5) {
            console.log(`Less than 5`);
            setError('ERROR');
        } else {
            console.log(`MORE`);
            setError('');
        }
    }

    const onSubmit = values => {
        const copy = JSON.parse(JSON.stringify(values));
        let a = {"str": Number(copy.num)};
        return a;
    };

    return (
        <CustomFieldEdit onSubmit={onSubmit}>
            <TextField name="num" label="Num: " defaultValue={fieldValue?.num} onChange={(value) => console.log(value)}/>
        </CustomFieldEdit>
    );
};

Any help is appreciated

2

Should probably be

            <TextField name="num" label="Num: " defaultValue={fieldValue?.num} onChange={handleInputChange} />
3

That doesn’t work either. Unfortunately

4

@ViktorKuzmychov The TextField component in the UI Kit does not support the onChange prop, as stated in the documentation here. However, the TextField component in UI Kit 2 does support it. You may find it beneficial to use UI Kit 2 instead, which you can learn more about here.

From my perspective, while the UI Kit is suitable for building a basic app, delving into Custom UI or UI Kit 2, which offers slightly more advanced features, might be advantageous if you’re aiming to create a more dynamic application.

2 Likes
5

For info, the custom field module doesn’t support UI Kit v2 for now.
Atlassian is working on it, but this specific module is more complex than expected, so it is taking some time.

2 Likes