Prefill fields of a widget

Question

I have to use a widget on my site. I don't have access to widget source code(minified, obfuscated). Widget works with my DOM inserting some divs, not frame. Widget is probably build with react( react prefixes on some divs).

Use case: user fiels widget form, click "send" and gets some feedback. To improve user experience, I want to prefill those fields.

There is no way to do it, according to widgets company.
I have no experience with react.

What I have tried so far:

1. Set a value for input after DOM is ready -> partial working. Fields are prefilled, but values disappear if I try to change one of them. I think, values are stored somewhere else and only duplicated to inputs.

2. Tried to manually fire input events(change, focus, keyup) to initialize widget scripts after value change -> no result.

3. Tried to emulate keypress events -> run into browser security.

Is there something else I can do?

Answer 1

When it comes to changing input values React does some trickery because it kind of overwrites the default getter/setter for value of an input element and it has its own value tracker. To make the changes get handled in React you need to use native value setter to provide new value for an input and then dispatch an input event:

 const App = () => <input id="input" onChange={({target: {value}}) => console.log(`input event handled in React with value: ${value}`)} /> ReactDOM.render(<App/>, document.getElementById("root")); document.getElementById("dispatch-fake-event").addEventListener("click", () => { const inputEl = document.getElementById("input"); Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set.call( inputEl, "new value" ); const event = new Event("input", { bubbles: true, cancelable: false }); inputEl.dispatchEvent(event); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.development.js"></script> <div id="root"></div> <button id="dispatch-fake-event">dispatch fake event</button>

Answer 2

Redux form is component of react which allows to collect data from form and initialize the inital values also of the redux form, below is the example with initial values of redux form hence the fields will take that values as initial values when you want to prefill full or partial data into forms. Also note that initial state can also be empty

let InitializeFromStateForm = props => {
  const { handleSubmit, load, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
       // your components
      </div>
    </form>
  )
}

// Decorate with reduxForm(). It will read the initialValues prop provided by connect()
InitializeFromStateForm = reduxForm({
  form: 'initializeFromState' // a unique identifier for this form
})(InitializeFromStateForm)

// You have to connect() to any reducers that you wish to connect to yourself
InitializeFromStateForm = connect(
  state => ({
    initialValues: state.account.data // pull initial values from account reducer
  }),
  { load: loadAccount } // bind account loading action creator
)(InitializeFromStateForm)

export default InitializeFromStateForm

Please find the complete documentation example here