React plugin is broken #58
Description
🐛 Bug report
Current Behavior
- UI doesn't reflect clicks on radio buttons
- Logic for radio button doesn't work (it should present "enter manual" input, if "other" option was picked)
- Looks like form was submitted without issues
- But when we check Results tab at Dashboard, data is broken. Fields we setup in editor are empty (
userId,persona,enterManualy), and there are lot of extra fields with "hashed" ids
{
"userId": "",
"persona": "",
"enterManualy": "",
"h7N0rEmm2": "fixed option a",
"6CRqaItd3": "fixed option b"
}Expected behavior
- UI reflects clicks on radio buttons, they should be marked as checked
- If user click/choses "other" radio button, field "enter manualy" should be shown
- Results are saved correctly
Reproducible example
import React, { useEffect, useState } from 'react';
import { createClient } from '@formium/client'
import { FormiumForm, defaultComponents } from '@formium/react';
const formium = createClient(
"PROJECT_ID",
{ apiToken: "TOKEN", }
)
function App() {
const [formSchema, setFormSchame] = useState<null|any>(null)
const form_slug = 'test-form'
useEffect(() => {
async function fetchData() {
const schema = await formium.getFormBySlug(form_slug)
console.log('got form schema', schema)
setFormSchame(schema);
}
fetchData();
}, []);
let form = (<span>Loading...</span>)
if (formSchema) {
form = (<FormiumForm
data={formSchema}
components={defaultComponents}
onSubmit={async values => {
// Send form values to Formium
let res = await formium.submitForm(form_slug, values);
console.log('form submitted', res)
alert('Success');
}}
/>)
}
return (
<div className="App">
{form}
</div>
);
}
export default App;Additional context
fetched form schema
{"id":"<form_id>","customerId":"<customer_id>","projectId":"<project_id>","name":"test form","previewMode":"HOSTED","schema":{"pageIds":["8sKLOUpPj"],"fields":{"8sKLOUpPj":{"id":"8sKLOUpPj","title":"test form","slug":"____","type":"PAGE","hidden":false,"dynamic":false,"orderLast":false,"items":["37J88P9fkt","IyGWSFQ4Y","VCoXkzTGe"],"actions":[]},"37J88P9fkt":{"id":"37J88P9fkt","title":"userId","slug":"userId","type":"SHORT_TEXT","required":false,"hidden":true,"dynamic":true,"dynamicParam":"userId","placeholder":"","orderLast":false,"items":[],"actions":[]},"IyGWSFQ4Y":{"id":"IyGWSFQ4Y","title":"Choose your persona","slug":"persona","type":"RADIO","hidden":false,"dynamic":false,"orderLast":false,"items":["h7N0rEmm2","6CRqaItd3","fEe91jEwK"],"actions":[{"action":"SHOW","details":{"to":{"type":"FIELD","value":"VCoXkzTGe"}},"condition":{"op":"and","vars":[{"op":"eq","vars":[{"op":"field","value":"IyGWSFQ4Y"},{"op":"choice","value":"fEe91jEwK"}]}]}}]},"h7N0rEmm2":{"id":"h7N0rEmm2","title":"fixed option a","slug":"h7N0rEmm2","type":"CHOICE","hidden":false,"dynamic":false,"orderLast":false,"items":[],"actions":[]},"6CRqaItd3":{"id":"6CRqaItd3","title":"fixed option b","slug":"6CRqaItd3","type":"CHOICE","hidden":false,"dynamic":false,"orderLast":false,"items":[],"actions":[]},"fEe91jEwK":{"id":"fEe91jEwK","title":"other","slug":"fEe91jEwK","type":"CHOICE","hidden":false,"dynamic":false,"orderLast":false,"items":[],"actions":[]},"VCoXkzTGe":{"id":"VCoXkzTGe","title":"enter manualy","slug":"enterManualy","type":"SHORT_TEXT","hidden":true,"dynamic":false,"orderLast":false,"items":[],"actions":[]}}},"slug":"test-form","keys":[{"name":"____","visibility":"SHOWN"},{"name":"tb4ZsXwT-","visibility":"SHOWN"},{"name":"qDbosH1iU","visibility":"SHOWN"},{"name":"zB3CbgMUk","visibility":"SHOWN"},{"name":"LS5qk5Iqs","visibility":"SHOWN"},{"name":"6CRqaItd3","visibility":"SHOWN"},{"name":"fEe91jEwK","visibility":"SHOWN"},{"name":"UFcbj__jf","visibility":"SHOWN"},{"name":"userId","visibility":"SHOWN"},{"name":"persona","visibility":"SHOWN"},{"name":"enterManualy","visibility":"SHOWN"},{"name":"bExtraOptions","visibility":"SHOWN"},{"name":"h7N0rEmm2","visibility":"SHOWN"}],"submitLayout":"LIST","status":"ACTIVE","validate":"ANY","actionIds":[],"submitCount":8,"version":4,"createAt":"2021-02-22T08:13:38.439Z","createId":"<id>","updateAt":"2021-03-04T13:38:30.226Z","updateId":"<id>"}what formium.submitForm sends (doesn't matter what I have filled)
{"userId":"","persona":"","enterManualy":"","h7N0rEmm2":"fixed option a","6CRqaItd3":"fixed option b"}response for this request
{"ok":true}how form looks in editor
logic branch
Your environment
"react": "^16.0.8",
"@formium/client": "^0.1.3",
"@formium/react": "^0.1.3",