Skip to content

Commit 873e468

Browse files
fix cursor jumping in password comp
1 parent 884d930 commit 873e468

File tree

1 file changed

+20
-6
lines changed

1 file changed

+20
-6
lines changed

client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx

+20-6
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@ export const useTextInputProps = (props: RecordConstructorToView<typeof textInpu
170170
const [validateState, setValidateState] = useState({});
171171
const changeRef = useRef(false)
172172
const touchRef = useRef(false);
173+
const [localInputValue, setLocalInputValue] = useState<string>('');
173174

174175
const propsRef = useRef<RecordConstructorToView<typeof textInputChildren>>(props);
175176
propsRef.current = props;
@@ -181,20 +182,26 @@ export const useTextInputProps = (props: RecordConstructorToView<typeof textInpu
181182
props.value.onChange(defaultValue)
182183
}, [defaultValue]);
183184

185+
useEffect(() => {
186+
if (inputValue !== localInputValue) {
187+
setLocalInputValue(inputValue);
188+
}
189+
}, [inputValue]);
190+
184191
useEffect(() => {
185192
if (!changeRef.current) return;
186193

187194
setValidateState(
188195
textInputValidate({
189196
...propsRef.current,
190197
value: {
191-
value: inputValue,
198+
value: localInputValue,
192199
},
193200
})
194201
);
195202
propsRef.current.onEvent("change");
196203
changeRef.current = false;
197-
}, [inputValue]);
204+
}, [localInputValue]);
198205

199206
useEffect(() => {
200207
if (!touchRef.current) return;
@@ -203,7 +210,7 @@ export const useTextInputProps = (props: RecordConstructorToView<typeof textInpu
203210
textInputValidate({
204211
...propsRef.current,
205212
value: {
206-
value: props.value.value,
213+
value: localInputValue,
207214
},
208215
})
209216
);
@@ -212,19 +219,26 @@ export const useTextInputProps = (props: RecordConstructorToView<typeof textInpu
212219
const debouncedOnChangeRef = useRef(
213220
debounce((value: string) => {
214221
props.value.onChange(value);
215-
changeRef.current = true;
216-
touchRef.current = true;
217222
}, 1000)
218223
);
219224

220225
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
221226
const value = e.target.value;
227+
setLocalInputValue(value);
228+
229+
changeRef.current = true;
230+
touchRef.current = true;
222231
debouncedOnChangeRef.current?.(value);
223232
};
224233

225234
return [
226235
{
227-
...textInputProps(props),
236+
...textInputProps({
237+
...props,
238+
value: {
239+
value: localInputValue,
240+
} as any,
241+
}),
228242
onChange: handleChange,
229243
},
230244
validateState,

0 commit comments

Comments
 (0)