fix(input): do not trigger provided onBlur when it's a syntethic event

guilhermerodz · Oct 29, 2024 · ba1612c · ba1612c
1 parent 363c66c
commit ba1612c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/packages/input-otp/src/input.tsx b/packages/input-otp/src/input.tsx
@@ -4,7 +4,7 @@ import * as React from 'react'
 
 import { REGEXP_ONLY_DIGITS } from './regexp'
 import { syncTimeouts } from './sync-timeouts'
-import { OTPInputProps, RenderProps } from './types'
+import { OTPInputMetadata, OTPInputProps, RenderProps } from './types'
 import { usePrevious } from './use-previous'
 import { usePasswordManagerBadge } from './use-pwm-badge'
 
@@ -68,14 +68,13 @@ export const OTPInput = React.forwardRef<HTMLInputElement, OTPInputProps>(
         typeof window !== 'undefined' &&
         window?.CSS?.supports?.('-webkit-touch-callout', 'none'),
     })
-    const inputMetadataRef = React.useRef<{
-      prev: [number | null, number | null, 'none' | 'forward' | 'backward']
-    }>({
+    const inputMetadataRef = React.useRef<OTPInputMetadata>({
       prev: [
         inputRef.current?.selectionStart,
         inputRef.current?.selectionEnd,
         inputRef.current?.selectionDirection,
       ],
+      willSyntethicBlur: false,
     })
     React.useImperativeHandle(ref, () => inputRef.current, [])
     React.useEffect(() => {
@@ -270,6 +269,7 @@ export const OTPInput = React.forwardRef<HTMLInputElement, OTPInputProps>(
     const pwmb = usePasswordManagerBadge({
       containerRef,
       inputRef,
+      inputMetadataRef,
       pushPasswordManagerStrategy,
       isFocused,
     })
@@ -434,6 +434,10 @@ export const OTPInput = React.forwardRef<HTMLInputElement, OTPInputProps>(
             props.onFocus?.(e)
           }}
           onBlur={e => {
+            if (inputMetadataRef.current.willSyntethicBlur) {
+              inputMetadataRef.current.willSyntethicBlur = false
+              return
+            }
             setIsFocused(false)
             props.onBlur?.(e)
           }}

diff --git a/packages/input-otp/src/types.ts b/packages/input-otp/src/types.ts
@@ -39,3 +39,7 @@ export type OTPInputProps = OTPInputBaseProps &
         children: React.ReactNode
       }
   )
+export type OTPInputMetadata = {
+  prev: [number | null, number | null, 'none' | 'forward' | 'backward']
+  willSyntethicBlur: boolean
+}
diff --git a/packages/input-otp/src/use-pwm-badge.tsx b/packages/input-otp/src/use-pwm-badge.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { OTPInputProps } from './types'
+import { OTPInputMetadata, OTPInputProps } from './types'
 
 const PWM_BADGE_MARGIN_RIGHT = 18
 const PWM_BADGE_SPACE_WIDTH_PX = 40
@@ -15,11 +15,13 @@ const PASSWORD_MANAGERS_SELECTORS = [
 export function usePasswordManagerBadge({
   containerRef,
   inputRef,
+  inputMetadataRef,
   pushPasswordManagerStrategy,
   isFocused,
 }: {
   containerRef: React.RefObject<HTMLDivElement>
   inputRef: React.RefObject<HTMLInputElement>
+  inputMetadataRef: React.RefObject<OTPInputMetadata>
   pushPasswordManagerStrategy: OTPInputProps['pushPasswordManagerStrategy']
   isFocused: boolean
 }) {
@@ -104,6 +106,7 @@ export function usePasswordManagerBadge({
     // to trigger a re-position of the badge.
     if (!pwmMetadata.current.refocused && document.activeElement === input) {
       const sel = [input.selectionStart, input.selectionEnd]
+      inputMetadataRef.current.willSyntethicBlur = true
       input.blur()
       input.focus()
       // Recover the previous selection