fix(InputMask): fixes defaultValue

innovaccer · Aug 24, 2020 · 3fa730f · 3fa730f
1 parent c1e4bcd
commit 3fa730f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/core/components/molecules/inputMask/InputMask.tsx b/core/components/molecules/inputMask/InputMask.tsx
@@ -28,15 +28,18 @@ export interface MaskProps extends BaseProps {
   onClear?: (e: React.MouseEvent<HTMLElement>) => void;
 }
 export type InputMaskProps = InputProps & MaskProps;
+
 /**
- * InputMask works as uncontrolled component
+ * It works as Uncontrolled Input
+ *
+ * **Updated value can be passed**
  */
 export const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((props, forwardRef) => {
   const {
     mask: maskProp,
     value: valueProp,
-    defaultValue,
     placeholderChar = '_',
+    defaultValue,
     mask,
     error,
     caption,
@@ -59,6 +62,12 @@ export const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((pro
     setCaretPos(caret);
   }, [caret]);
 
+  React.useEffect(() => {
+    if (ref.current && valueProp) {
+      setValue(convertToMasked(valueProp));
+    }
+  }, [valueProp]);
+
   React.useEffect(() => {
     if (ref.current) {
       const el = ref.current;

diff --git a/core/components/molecules/inputMask/__stories__/index.story.tsx b/core/components/molecules/inputMask/__stories__/index.story.tsx
@@ -16,8 +16,8 @@ export const all = () => {
     'value',
     ''
   );
-  const defaultvalue = text(
-    'defaultvalue',
+  const defaultValue = text(
+    'defaultValue',
     ''
   );
 
@@ -78,7 +78,7 @@ export const all = () => {
         name="input"
         type={inputType}
         value={value}
-        defaultValue={defaultvalue}
+        defaultValue={defaultValue}
         disabled={disabled}
         onChange={action('on-change')}
         onClick={action('on-click')}