Update defaultValue behavior

Add default value handling for phonenumberinput.

categories/formatted/react/src/components/PhoneNumberInput/index.tsx

@@ -73,12 +73,15 @@ export const PhoneNumberInput = React.forwardRef<
     onChange,
     name,
     length,
+    defaultValue,
     ...etcProps
   }: PhoneNumberInputProps,
   forwardedRef,
 ) => {
   const { clientSide } = useClientSide({ clientSide: enhanced });
-  const [phoneNumber, setPhoneNumber] = React.useState<Value>(value?.toString() ?? '');
+  const [phoneNumber, setPhoneNumber] = React.useState<Value>(
+    value?.toString() ?? defaultValue?.toString() ?? ''
+  );
   const labelId = React.useId();
   const defaultId = React.useId();
   const id = idProp ?? defaultId;
@@ -150,6 +153,7 @@ export const PhoneNumberInput = React.forwardRef<
         value={value}
         onChange={onChange}
         ref={defaultRef}
+        defaultValue={defaultValue}
         aria-labelledby={labelId}
         type="tel"
         id={id}

packages/react-utils/src/hooks/form.ts

@@ -64,8 +64,11 @@ export const useProxyInput = <
     if (!input) {
       return;
     }
-    valueSetterFn(transformChangeHandlerArgs(e));
-    delegateTriggerEvent('change', input, e);
+    const transformedValue = transformChangeHandlerArgs(e);
+    valueSetterFn(transformedValue);
+    setTimeout(() => {
+      delegateTriggerEvent('change', input, transformedValue);
+    });
   }, [valueSetterFn, transformChangeHandlerArgs, defaultRef]);
 
   return React.useMemo(() => ({

showcases/web-kitchensink-reactnext/src/pages/categories/formatted/index.tsx

@@ -21,12 +21,31 @@ const TemporalPage: NextPage = () => {
             onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.value)}}
           />
         </Subsection>
+        <Subsection title="Non-enhanced">
+          <Formatted.PhoneNumberInput
+            label="Phone"
+            name="phone"
+            border
+            onFocus={(e) => { console.log('focus', e.currentTarget)}}
+            onBlur={(e) => { console.log('blur', e.currentTarget)}}
+            onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.value)}}
+          />
+        </Subsection>
+        <Subsection title="With Default Value">
+          <Formatted.PhoneNumberInput
+            label="Phone"
+            name="phone2"
+            enhanced
+            border
+            defaultValue="+639876543210"
+          />
+        </Subsection>
         <Subsection title="With Ref">
           <div className="flex gap-4 flex-wrap">
             <div>
               <Formatted.PhoneNumberInput
                 label="Phone"
-                name="phone"
+                name="phone3"
                 enhanced
                 border
                 ref={phoneNumberRef}