T
TanStack•4mo ago
manual-pink

Filling in field values from outside React (and TSF) is not taken into account?

I converted one of our form to TSF and one of our tester is complaining that his bookmarklet does not work anymore. He is using this script: 
javascript:(function () {
    function setFieldValue(id, value) {
        const el = document.getElementById(id);
        if (!el) return;
        el.value = value;

        el.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true }));

        el.dispatchEvent(new Event('input', { bubbles: true }));
        el.dispatchEvent(new Event('change', { bubbles: true }));
        el.dispatchEvent(new Event('blur', { bubbles: true }));
    }
    setFieldValue('companyName', 'Company');
    setFieldValue('companyAddressLine1', '123 Some Rd');
    setFieldValue('companyCity', 'City');
    setFieldValue('companyZipCode', '123');
    setFieldValue('companyState', 'Some state');
    setFieldValue('vat', '123456');
})();
javascript:(function () {
    function setFieldValue(id, value) {
        const el = document.getElementById(id);
        if (!el) return;
        el.value = value;

        el.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true }));

        el.dispatchEvent(new Event('input', { bubbles: true }));
        el.dispatchEvent(new Event('change', { bubbles: true }));
        el.dispatchEvent(new Event('blur', { bubbles: true }));
    }
    setFieldValue('companyName', 'Company');
    setFieldValue('companyAddressLine1', '123 Some Rd');
    setFieldValue('companyCity', 'City');
    setFieldValue('companyZipCode', '123');
    setFieldValue('companyState', 'Some state');
    setFieldValue('vat', '123456');
})();
When he is executing this script, visually all the field above are filled in visually but their new values are not picked up by TSF. It's weird because onBlur and onChange and calling field.XXX as expected. If I click on of the filled in field it's value is automatically reset. If I use the bookmarklet (all fields are filled in from a visual point of view) and click submit, the fields are suddenly all empty and the validation errors are displayed. Any idea on how to change the bookmarklet code so that TSF realized that the inputs where fill in from the "outside"?
1 Reply
sensitive-blue
sensitive-blue•4mo ago
how is your field input element set up?

Did you find this page helpful?