Resetting form doesn&#039;t restore MDBInput to its init

Topic: Resetting form doesn't restore MDBInput to its initial state

jeromez free asked 3 years ago

Expected behavior Input should be restored to its original state when submitting a form.

Actual behavior When resetting the form, MDBInput is still in the Edit state.

**Steps to reproduce Enter a value in an input field Select Reset

Empty state Entering value Reset the form

...

Reset

Mikołaj Smoleński staff commented 3 years ago

Could you please create a snippet that will show the issue? I am not sure how you're resetting the input values.

Keep coding, Mikołaj from MDB

jeromez free commented 3 years ago

Here's my component ( see e.target.reset() ):

Send

Thank you for your message. We will come back to your shortly.

import { MDBInput, MDBTextarea, MDBAlert } from "mdb-vue-ui-kit"; import { reactive, getCurrentInstance, ref } from "vue"; import { useAxios } from "@vueuse/integrations"; const input = reactive({ email: "", text: "" }); const messageSent = ref(false); const instance = getCurrentInstance(); const baseURL = instance.appContext.config.globalProperties.api.baseUrl + "labs/messages"; const onCheckForm = e => { e.preventDefault(); const body = { email: input.email, text: input.text }; useAxios(baseURL, { method: "POST", data: body }); messageSent.value = true; e.target.reset(); };

.btn-tertiary { background: #95d5b2; font-weight: 600; font-size: 1em; }

Please insert min. 15 characters.

Mikołaj Smoleński staff commented 3 years ago

Here's an example snippet for Input resetting: https://mdbootstrap.com/snippets/vue/mikolaj-smolenski/3353570

Keep coding, Mikołaj from MDB

Add comment