MDBTextarea not updating when isValid and isValidated props


Topic: MDBTextarea not updating when isValid and isValidated props change

Menno pro premium priority asked 3 months ago

Hello,

I encountered a bug with the MDBTextarea component. The MDBTextarea component does not show the validation message when the validation props change.

I am using server side validation with MDBTextarea like so:

<MDBTextarea
            :label="title"
            v-model="data.content"
            :invalid-feedback="getValidationMsg('content')"
            :is-valid="isValid('content')"
            :is-validated="validated"
        />

This works fine for the MDBInput component, but not for the MDBTextarea component.

I looked in the source code and found that the isInputValidated and isInputValid refs are never updated, when the props.isValidated and props.isValid have changed.

In MDBInput component these refs get updated through watchers like so:

watch(
  () => props.isValidated,
  (value) => (isInputValidated.value = value)
);

watch(
  () => props.isValid,
  (value) => (isInputValid.value = value)
);

Expected behavior

The MDBTextarea component to show validation messages when the validation props change.

Actual behavior

The MDBTextarea component does not show validation messages when the validation props change.


Mikołaj Smoleński staff commented 3 months ago

Thanks for posting an issue. We're going to fix it as soon as possible.

Keep coding,  Mikołaj from MDB


Mikołaj Smoleński staff commented 3 months ago

@ it should be fixed with upcoming today 1.12.0 version of our UI KIT.

Keep coding, Mikołaj from MDB


Leonardo Sartor pro answered 3 months ago

Hello how are you? I came across the same problem:

<MDBTextarea
  label="Descrição"
  name="description"
  rows="4"
  v-model="inputDescriptionGroup"
  wrapperClass="mb-4"
  :isValidated="validDescription"
  :isValid="isValidDescription"
/>

Script code:

setup() {
    const isValidCategory = ref(false);
    const validDescription = ref(false);
    return {
      validDescription,
      isValidDescription,
    }
}

In between axios response:

if ('description' in response.data.errors) {
    this.validDescription = true;
    this.isValidDescription = false;
    this.descriptionAlertDanger.push(response.data.errors.description.toString());
}

For the other input fields it works normally, only for MDBTextarea that doesn't work...


Mikołaj Smoleński staff commented 3 months ago

@Leonardo Sartor it should be fixed with upcoming today 1.12.0 version of our UI KIT.

Keep coding,  Mikołaj from MDB


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 1.11.0
  • Device: n/a
  • Browser: n/a
  • OS: n/a
  • Provided sample code: No
  • Provided link: No