@uniai-fe/uds-primitives 0.1.5 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,

package/src/components/input/markup/text/Base.tsx

@@ -275,8 +275,7 @@ const Text = forwardRef<HTMLInputElement, InputProps>(
       [onChange, registerOnChange],
     );
 
-    const handleClear = useCallback((event: MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault();
+    const dispatchNativeInputEvent = useCallback(() => {
       const inputEl = inputRef.current;
       if (!inputEl) {
         return;
@@ -288,11 +287,25 @@ const Text = forwardRef<HTMLInputElement, InputProps>(
       nativeSetter?.call(inputEl, "");
       const changeEvent = new Event("input", { bubbles: true });
       inputEl.dispatchEvent(changeEvent);
-      setHasValue(false);
-      setIsClearInteracting(false);
-      inputEl.focus();
     }, []);
 
+    const handleClear = useCallback(
+      (event: MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        dispatchNativeInputEvent();
+        setHasValue(false);
+        setIsClearInteracting(false);
+        const inputEl = inputRef.current;
+        inputEl?.focus();
+        // 일부 브라우저(특히 로그인 필드)가 focus 직후 자동완성을 재삽입하는 경우가 있어
+        // 다음 프레임에서 한 번 더 초기화해 값을 비워 둔다.
+        requestAnimationFrame(() => {
+          dispatchNativeInputEvent();
+        });
+      },
+      [dispatchNativeInputEvent],
+    );
+
     const handleClearPointerDown = useCallback(() => {
       setIsClearInteracting(true);
     }, []);