Select OnChange Event always errored

Forge Forge UI Kit and Custom UI
, ,
1

I have problem with validation of product item. Since it has onChange hook, the state of product field is always error. Somehow the value of the select is not set correctly.
I want to create Issue Panel with some complex input mask.

const productList = [
    { label: "Product1", value: 5, specialTreatments: [{ label: "Treatment1", value: 1 },{ label: "Treatment2", value: 2 }] },
    { label: "Product2", value: 9, specialTreatments: [] } ];
const [specialTreatmentsItems, setspecialTreatmentsItems] = useState([]);

const productEntryChanged = (event) => {
  setspecialTreatmentsItems(event.specialTreatments);
};
return (<>
<Form>
<FormSection>
     <Stack grow="fill">
          <Label labelFor={getFieldId("product")}>Produkt<RequiredAsterisk /></Label>
          <Select {...register("product", { required: 'Error Text'})} options={productList} onChange={productEntryChanged}></Select>
     </Stack>
     <Stack grow="fill">
          <Label labelFor={getFieldId("SpecialTreatments")}>Sonderbehandlung</Label>
          <Select {...register("SpecialTreatments")} options={specialTreatmentsItems}  isClearable></Select>
     </Stack>
</FormSection>
</Form>
</>);

add value property


const [product, setProduct] = useState({});

const productEntryChanged = (event) => {
    setspecialTreatmentsItems(event.specialTreatments);
    setProduct(event);
};

...
<Select {...register("product", { required: 'Error Text' })} options={productList} onChange={productEntryChanged} value={product}></Select>

The input is being set, but validation still on error state. Removing onChange event resolves the problem, but i need to set special treatments depends on product

image
image450×137 8.06 KB

2

Something similar has come up before: Set field values programatically when using useForm - #4 by AaronCollier
You can’t use the onChange event separately when you register the element. register adds its own function, which you can use in the returned value: https://developer.atlassian.com/platform/forge/ui-kit/hooks/use-form/#register

3

thx, link you provide did not solving my problem. Most possible approach is to add the function to on validate event. This works.


const [specialTreatmentsItems, setspecialTreatmentsItems] = useState([]);

const productEntryChanged = (event) => {
    //event = getValues('Product'); //only for onBlur
    setspecialTreatmentsItems(event?.specialTreatments);
    return true;
};

<Select {...register("Product", 
{ required: true, validate: productEntryChanged} )} 
options={productList} isClearable/>

//or just with same effect with onBlur
<Select {...register("Product", { required: true} )} 
options={productList} isClearable onBlur={productEntryChanged}/>

<Select {...register("SpecialTreatments.Type")} 
options={specialTreatmentsItems} isClearable />

I couldn’t find out how to reset the selection. Because if I reset the options, selection still not resetted :frowning:

useState is another way, but it not compatible to register :angry:

4

If you’d like to control the value yourself, I think you’d have to not register it.

5

Validation and other stuff are different. I will need to store any property separately… is their any plan when the other react features will be added to the forge/react?