megahertz / react-simple-wysiwyg

Simple and lightweight React WYSIWYG editor
https://megahertz.github.io/react-simple-wysiwyg/
MIT License
119 stars 21 forks source link

Refreshing inside <form> tag #2

Closed ValEmpire closed 3 years ago

ValEmpire commented 3 years ago

when used inside the

megahertz commented 3 years ago

Could you provide a code sample?

Lesnock commented 3 years ago

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

megahertz commented 3 years ago

@Lesnock Could you provide a code sample?

casperleerink commented 3 years ago

I have the same problem `

    <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.

megahertz commented 3 years ago

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

megahertz commented 3 years ago

Fixed