How Form Automation Handles React and Vue Applications

React and Vue applications present a unique challenge for form automation. Standard DOM manipulation — setting element.value directly — doesn’t update the framework’s internal state, causing forms to submit empty values despite appearing filled.

## The Framework State Problem

React uses a virtual DOM and a fiber reconciler. When React renders an input, it attaches internal fiber data to the DOM element. The real value state lives in this fiber, not in the DOM element’s value property.

Setting element.value = “text” updates the DOM but not React’s fiber state. When the form submits, React reads from its fiber state — which still contains the empty value.

## Solution: Native Setter + InputEvent

The correct approach has two parts:

**Part 1 — Native Setter:**
“`javascript
const proto = window.HTMLInputElement.prototype;
const nativeSetter = Object.getOwnPropertyDescriptor(proto, ‘value’);
nativeSetter.set.call(element, ‘your value’);
“`
This bypasses React’s override of the value setter.

**Part 2 — InputEvent:**
“`javascript
element.dispatchEvent(new InputEvent(‘input’, {
bubbles: true, cancelable: true,
inputType: ‘insertText’, data: ‘your value’
}));
“`
This triggers React’s synthetic event system, updating its internal state.

## React Fiber Direct Access

For complex cases, accessing the fiber directly works:
“`javascript
const fiberKey = Object.keys(el).find(k => k.startsWith(‘__reactFiber’));
const fiber = el[fiberKey];
const onChange = fiber?.memoizedProps?.onChange;
if (onChange) onChange({ target: el });
“`

## Vue Reactivity

Vue’s reactivity system responds to the same InputEvent approach. Dispatch an InputEvent with `inputType: ‘insertText’` and Vue’s watchers will trigger.

## Testing Compatibility

Always test on 2-3 forms before running large campaigns on a new React/Vue site. For the full context of form automation workflows, see our [complete technical guide](https://what-is-form-automation-complete-technical-guide).