FormField onClickevent called many times

[sunchuanstc]

const a = useForm({ mode: "all", resolver: zodResolver(createIDEFormSchema), defaultValues: { ideName: "aa", ideType: 1, ideImage: "2" } })

const testEvent = (value) =>{
a.setValue("ideImage",value);
}

//<Form {...a}>

<FormField
control={a.control}
name="ideImage"
render={({ field }) => (

...


<div style={{ border: "1px red solid" }} onClick={()=>{testEvent("1")}}>
aaa

                <div style={{ border: "1px skyblue solid" }} onClick={()=>{testEvent("2")}}>
                  bbb
                    <FormControl>
                      <RadioGroupItem value="2" />
                    </FormControl>
                </div>
                <div style={{ border: "1px black solid" }} onClick={()=>{testEvent("3")}}>
                  ccc
                    <FormControl>
                      <RadioGroupItem value="3" />
                    </FormControl>
                </div>
              </RadioGroup>
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
    </form>

//

Hi, when I click the div aaa /div,testEvent("1") will be called, and then testEvent("1") and testEvent("2") call twice, why? can anyone help me? it seems the react hook form has some problom

[KhaledSaeed18]

The issue you're experiencing is likely due to event bubbling in the DOM, not a problem with React Hook Form itself.

When you click on a nested div, the click event bubbles up through the DOM tree, triggering click handlers on parent elements as well. In your case: When you click the "bbb" div (with testEvent("2")), it triggers that handler, The event then bubbles up to the parent "aaa" div, triggering testEvent("1") as well and This results in both handlers being called

Solution: Stop Event Propagation

Modify your click handlers to prevent event bubbling:

const testEvent = (value, event) => {
  event.stopPropagation(); // Prevent event from bubbling up
  a.setValue("ideImage", value);
}

// Update onClick handlers:
<div style={{ border: "1px red solid" }} onClick={(e) => testEvent("1", e)}>
  aaa
  <div style={{ border: "1px skyblue solid" }} onClick={(e) => testEvent("2", e)}>
    bbb
    <FormControl>
      <RadioGroupItem value="2" />
    </FormControl>
  </div>
  <div style={{ border: "1px black solid" }} onClick={(e) => testEvent("3", e)}>
    ccc
    <FormControl>
      <RadioGroupItem value="3" />
    </FormControl>
  </div>
</div>

Alternative approaches you could also use:

• Structural fix, Instead of nesting bbb and ccc inside the clickable aaa div, separate them. That way, bubbling won’t matter.

<div style={{ border: "1px red solid" }} onClick={(e) => testEvent("1", e)}>
  aaa
</div>
<div style={{ border: "1px skyblue solid" }} onClick={(e) => testEvent("2", e)}>
  bbb
</div>
<div style={{ border: "1px black solid" }} onClick={(e) => testEvent("3", e)}>
  ccc
</div>

• Use event.currentTarget to ensure the handler only reacts to clicks on that specific element, though that doesn’t fully solve bubbling, it just makes intent clearer.

const testEvent = (value, event) => {
  if (event.target === event.currentTarget) {
    // Only execute if the click was directly on this element, not a child
    a.setValue("ideImage", value);
  }
}