Formik external controlling of inputs

Question

I am working on an application that will feature speech to text commands. Currently I have a form made - but I want to try and control the input elements from outside of the form framework.

<form id="myform">
  <input type="text" name="foo" />
</form>

I have followed this basic example and I can gain access to the input elements and change the value.

document.getElementById("myform").elements["foo"]
document.getElementById("myform").elements["foo"].value = "Peter Pan" 

I've created a fiddle here https://codesandbox.io/s/loving-waterfall-n3g4mt?file=/src/App.js

Best Practice: Access form elements by HTML id or name attribute?

but when I try and get access to formik form elements I am unable to find them using this method, let alone change values. I am not even sure how to even set an id on the form tag that formik makes -- this didnt have any impact so I had to set it around a div wrapper for now.

<Formik
   initialValues={"x"}
   validationSchema= {"x"}
   onSubmit={this.submitMyForm}
   innerRef={this.visitFormRef}
   id={"myform3"}
>

http://jsfiddle.net/3bsdn8yz/1/

<div id="myform3" class="general-formik standard-padding ">
   <form action="#">
      <div class="field field-comment">
         <div class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root">
            <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary Mui-error MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-1sumxir-MuiFormLabel-root-MuiInputLabel-root" data-shrink="true" for="mui-59" id="mui-59-label">Describe your symptoms here</label>
            <div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-error MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline css-8ewcdo-MuiInputBase-root-MuiOutlinedInput-root">
               <textarea rows="6" aria-invalid="true" autocomplete="off" name="describe_your_symptoms_here" placeholder="Text field" maxlength="700" class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline css-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input" id="mui-59" style="height: 138px;">xxx</textarea>
               <textarea aria-hidden="true" class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline css-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input" readonly="" tabindex="-1" style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0px); padding: 0px; width: 1115px;"></textarea>
               <fieldset aria-hidden="true" class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline">
                  <legend class="css-14lo706"><span>Describe your symptoms here</span></legend>
               </fieldset>
            </div>
         </div>
         <p class="MuiFormHelperText-root Mui-error css-1d1r5q-MuiFormHelperText-root">Must be at least 8 characters</p>
      </div>
      <div class="button-wrapper"><button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-sghohy-MuiButtonBase-root-MuiButton-root" tabindex="0" type="reset">Reset<span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"></span></button><button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium css-zcbmsk-MuiButtonBase-root-MuiButton-root" tabindex="0" type="submit">Submit<span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"></span></button></div>
   </form>
</div>

9th June 2023 I managed to get the value to change - but it reverted back to the formik object.

document.getElementsByName("describe_your_symptoms_here")[0].value = "Roger Rabbit"

How to update Formik Field from external actions

other research

How do I change a Formik TextField value from the outside of the From?

• I think he creates a function outside the framework and feeds it into formik at a particular place.

---

"Formik render method provides a prop to change the field value manually using setFieldValue prop it takes the field name & new values as parameters you can read about if more from here

As for what you need to change is here"

// accept a new parameter which you can pass to the `analyzeQuaggaFile` function
function inputFile(setFieldValue) {
  const file = document.getElementById("quaggaFile").files[0];

  const reader = new FileReader();

  reader.addEventListener(
    "load",
    function () {
      // pass the setFieldValue
      analyzeQuaggaFile(reader.result, setFieldValue);
    },
    false
  );

  reader.readAsDataURL(file);
}

// second parameter is setFieldValue
function analyzeQuaggaFile(src, setFieldValue) {
  Quagga.decodeSingle(
    {
      src: src,
      numOfWorkers: 0,
      inputStream: {
        size: 800,
      },
      decoder: {
        readers: ["ean_reader"],
      },
    },
    function (result) {
      if (result.codeResult) {
        // update the isbn field value
        setFieldValue("isbn", result.codeResult.code);
      } else {
        console.log("not detected");
      }
    }
  );
}

Now change this in your JSX code:

<Formik initialValues={{ name: "" }} onSubmit={handleSubmit}>
  {({ errors, isSubmitting, setFieldValue }) => (
    <Form className={classes.root}>
      {/* Other fields */}
      Scan bar code:
      <input
        id="quaggaFile"
        type="file"
        accept="image/*"
        capture="camera"
        onChange={() => inputFile(setFieldValue)} // pass the setFieldValue property from formik 
      />
      {/* Other fields */}
    </Form>
  )}
</Formik>;

https://github.com/jaredpalmer/formik/issues/229 How to update Formik Field from external actions

Answer 1

It's not possible to change using document.getElementById, even being able to actually change the HTML, the changes would not affect the component, you need to use the Formik built in setFieldValue. I created a ref and passed it down to the Formik so I could get the reference to this method. I also added a global event listener to be able to change this from anywhere, not just inside react code.

For example go to https://l6mssp.csb.app/ and run this code in the console:

window.dispatchEvent(
      new CustomEvent("formik_external_change", {
        detail: [
          { name: "wound_opening", value: ['0'] },
          { name: "pain_level", value: 4 },
          { name: "healthy_regrowth_of_skin", value: ['0'] },
          { name: "discolouration", value: 3 },
          { name: "swelling", value: 2 },
          { name: "describe_your_symptoms_here", value: "Feeling dizzy" }
        ]
      })
    );

https://codesandbox.io/s/nameless-framework-l6mssp

GeneralFormik.js

add the marked line (around line 129):

return (
      <div id={this.props.schema.id} className={"general-formik standard-padding " + getFormType()}>
        <Formik
          initialValues={getInitialValues(this.props.schema.initialValues, this.props.schema.fields)}
          validationSchema={createYupSchema(this.props.schema.fields)}
          onSubmit={this.submitMyForm}
          innerRef={this.visitFormRef}
        >
          {(props) => {
                 if (this.props.externalControlRef) {
                      this.props.externalControlRef.current = props.setFieldValue; //  assigning the method to the external ref
                 }
            return (
              <Form id={this.props.id} onKeyDown={this.onKeyDown}>
                <FieldMaker schema={this.props.schema} values={props.values} fieldChanged={this.fieldChanged} onErrorHandle={this.onErrorHandle} />
                <ButtonMaker schema={this.props.schema} />
              </Form>
            )
          }
          }
        </Formik>
      </div>
    )
  }

App.js

After declaring the schema:

 //  Creating the ref
  const externalControlRef = useRef();

  //  Creating a function to be able to call it with a nice name
  const setFormValues = (jsonArray) => {
    jsonArray.forEach(field => externalControlRef.current(field.name, field.value))
  }

  //  Global listener for the custom event "formik_external_change"
  useEffect(() => {
    const handleExternalFormikChange = (e) => {
      setFormValues(e.detail);
    }

    window.addEventListener("formik_external_change", handleExternalFormikChange);

    //  Need to remove the event listener on component unload otherwise it would have multiple events
    return () => window.removeEventListener("formik_external_change", handleExternalFormikChange);
  }, [])

  //  Triggering with a button but the code inside this can be called from anywhere (console or the text to speech library for example)
  const handleChange = () => {
    window.dispatchEvent(
      new CustomEvent("formik_external_change", {
        detail: [
          { name: "wound_opening", value: ['0'] },
          { name: "pain_level", value: 4 },
          { name: "healthy_regrowth_of_skin", value: ['0'] },
          { name: "discolouration", value: 3 },
          { name: "swelling", value: 2 },
          { name: "describe_your_symptoms_here", value: "Feeling dizzy" }
        ]
      })
    );
  }

  return (
    <div className="App">
      {/* //  Click to change! */}
      <button onClick={handleChange}>Check skin and change pain </button>

      <GeneralFormik
        externalControlRef={externalControlRef} //  Passing the ref down
        schema={schema3}
        submitHandler={function (data) {
          console.log("new data in parent", data);
        }}
      />
    </div>
  );