megahertz/react-simple-wysiwyg

Refreshing inside <form> tag

Closed this issue · 6 comments

when used inside the

Could you provide a code sample?

I'm having the same problem.
When I click on the editor, the form is submitted.

@Lesnock Could you provide a code sample?

I have the same problem
`


Title*
<input
type="text"
name="title"
value={data.title}
className={styles.input}
placeholder="Title of the entry"
id="title"
onChange={event => onTitleChange(event)}
/>

    <label htmlFor="text" className={styles.label}>Text</label>
    <DefaultEditor 
        value={data.html} 
        onChange={onTextChange} 
        name="text" 
        className={styles.input}
        placeholder="optional text"
    />

    <button onClick={submitNewEntry} className={styles.button}>
        Create new Entry
    </button>
</form>`

the function is a simple value setter:
const onTextChange = (e) => { setData({ ...data, html: e.target.value, }); }

It refreshes the page when clicking on bold or any other button in the component. This is more than likely because there is no e.preventDefault() on those button handlers in the component. When a button is in a form the default browser behavior makes it submit and refresh the page.

@casperleerink Thank you, I'll try to fix it till December.

Fixed