Browse Source

Update defaultValue behavior

Add default value handling for phonenumberinput.
master
TheoryOfNekomata 1 year ago
parent
commit
82fb2b253b
3 changed files with 30 additions and 4 deletions
  1. +5
    -1
      categories/formatted/react/src/components/PhoneNumberInput/index.tsx
  2. +5
    -2
      packages/react-utils/src/hooks/form.ts
  3. +20
    -1
      showcases/web-kitchensink-reactnext/src/pages/categories/formatted/index.tsx

+ 5
- 1
categories/formatted/react/src/components/PhoneNumberInput/index.tsx View File

@@ -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}


+ 5
- 2
packages/react-utils/src/hooks/form.ts View File

@@ -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(() => ({


+ 20
- 1
showcases/web-kitchensink-reactnext/src/pages/categories/formatted/index.tsx View File

@@ -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}


Loading…
Cancel
Save