Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

fix(ui): reset InputField on enabledTypes change (#3319)

Browse source
This commit is contained in:
simeng-li 2023-03-09 10:17:02 +08:00 committed by GitHub
parent 32dff20633
commit 1c5bdda02a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/ui/src/components/InputFields/SmartInputField/use-smart-input-field.ts
View file

@ -3,6 +3,7 @@ import { assert } from '@silverhand/essentials';
import { useState, useCallback, useMemo } from 'react';
import type { ChangeEventHandler } from 'react';
import useUpdateEffect from '@/hooks/use-update-effect';
import { getDefaultCountryCallingCode } from '@/utils/country-code';
import { parseIdentifierValue } from '@/utils/form';
@ -121,6 +122,12 @@ const useSmartInputField = ({ _defaultType, defaultValue, enabledTypes }: Props)
setCurrentType(enabledTypeSet.size === 1 ? defaultType : undefined);
}, [defaultType, enabledTypeSet.size]);
// CAUTION: For preview use only, enabledTypes and defaultType should not be changed after component mounted
useUpdateEffect(() => {
setInputValue('');
setCurrentType(defaultType);
}, [defaultType]);
return {
countryCode,
onCountryCodeChange,

19
packages/ui/src/hooks/use-update-effect.ts Normal file
View file

@ -0,0 +1,19 @@
import type { DependencyList, EffectCallback } from 'react';
import { useEffect, useRef } from 'react';
const useUpdateEffect = (effect: EffectCallback, dependencies: DependencyList | undefined = []) => {
const isMounted = useRef(false);
useEffect(() => {
if (!isMounted.current) {
// eslint-disable-next-line @silverhand/fp/no-mutation
isMounted.current = true;
return;
}
return effect();
}, [...dependencies]);
};
export default useUpdateEffect;