fix(Inputs): reactive validated prop

mtorromeo · Sep 27, 2024 · 92dddea · 92dddea
1 parent 258ddfd
commit 92dddea
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/packages/core/src/components/TextInput.vue b/packages/core/src/components/TextInput.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script lang="ts" setup>
-import { type Ref, ref, computed, type InputHTMLAttributes, getCurrentInstance } from 'vue';
+import { type Ref, ref, computed, toRefs, type InputHTMLAttributes, getCurrentInstance } from 'vue';
 import { useChildrenTracker } from '../use';
 import styles from '@patternfly/react-styles/css/components/FormControl/form-control';
 import { useInputValidation, type InputValidateState } from '../input';
@@ -116,6 +116,7 @@ const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
 const input: Ref<HTMLInputElement | undefined> = ref();
 const hasStatusIcon = computed(() => !props.noStatusIcon && ['success', 'error', 'warning'].includes(effectiveValidated.value));
 
+const { validated } = toRefs(props);
 const {
   value,
   effectiveValidated,
@@ -128,7 +129,7 @@ const {
 } = useInputValidation({
   inputElement: input,
   autoValidate: props.autoValidate,
-  validated: props.validated,
+  validated: validated,
 });
 
 useChildrenTracker(FormInputsKey, getCurrentInstance()?.proxy);

diff --git a/packages/core/src/components/Textarea.vue b/packages/core/src/components/Textarea.vue
@@ -41,7 +41,7 @@
 <script lang="ts" setup>
 import styles from '@patternfly/react-styles/css/components/FormControl/form-control';
 
-import { computed, ref, onMounted, type TextareaHTMLAttributes, type Ref, getCurrentInstance } from 'vue';
+import { computed, ref, onMounted, toRefs, type TextareaHTMLAttributes, type Ref, getCurrentInstance } from 'vue';
 import { useInputValidation } from '../input';
 import { useChildrenTracker } from '../use';
 import { FormGroupInputsKey, FormInputsKey } from './Form/common';
@@ -114,6 +114,7 @@ const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
 const input: Ref<HTMLTextAreaElement | undefined> = ref();
 const hasStatusIcon = computed(() => ['success', 'error', 'warning'].includes(effectiveValidated.value));
 
+const { validated } = toRefs(props);
 const {
   value,
   effectiveValidated,
@@ -126,7 +127,7 @@ const {
 } = useInputValidation({
   inputElement: input,
   autoValidate: props.autoValidate,
-  validated: props.validated,
+  validated: validated,
   customCheckValidity: checkValidity,
 });
 

diff --git a/packages/core/src/input.ts b/packages/core/src/input.ts
@@ -12,14 +12,14 @@ export function useInputValidation({
   customCheckValidity,
 }: {
   autoValidate: '' | 'blur' | 'input' | 'change' | 'enter' | boolean;
-  validated?: InputValidateState | null;
+  validated?: Ref<InputValidateState | undefined>;
   inputElement?: MaybeRef<InputElement | undefined>;
   customCheckValidity?: () => boolean;
 }) {
   const instance = getCurrentInstance()?.proxy;
 
   const innerValidated: Ref<InputValidateState> = ref('default');
-  const effectiveValidated = computed(() => validated ?? innerValidated.value);
+  const effectiveValidated = computed(() => validated?.value ?? innerValidated.value);
   watch(effectiveValidated, () => instance?.$emit('update:validated', effectiveValidated.value));
 
   const value = useManagedProp('modelValue', '');