Revert "fix(input): do not trigger provided onBlur when it's a syntet…

…hic event" This reverts commit ba1612c.
guilhermerodz · Oct 30, 2024 · 7203ec4 · 7203ec4
1 parent ba1612c
commit 7203ec4
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 16 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 { OTPInputMetadata, OTPInputProps, RenderProps } from './types'
+import { OTPInputProps, RenderProps } from './types'
 import { usePrevious } from './use-previous'
 import { usePasswordManagerBadge } from './use-pwm-badge'
 
@@ -68,13 +68,14 @@ export const OTPInput = React.forwardRef<HTMLInputElement, OTPInputProps>(
         typeof window !== 'undefined' &&
         window?.CSS?.supports?.('-webkit-touch-callout', 'none'),
     })
-    const inputMetadataRef = React.useRef<OTPInputMetadata>({
+    const inputMetadataRef = React.useRef<{
+      prev: [number | null, number | null, 'none' | 'forward' | 'backward']
+    }>({
       prev: [
         inputRef.current?.selectionStart,
         inputRef.current?.selectionEnd,
         inputRef.current?.selectionDirection,
       ],
-      willSyntethicBlur: false,
     })
     React.useImperativeHandle(ref, () => inputRef.current, [])
     React.useEffect(() => {
@@ -269,7 +270,6 @@ export const OTPInput = React.forwardRef<HTMLInputElement, OTPInputProps>(
     const pwmb = usePasswordManagerBadge({
       containerRef,
       inputRef,
-      inputMetadataRef,
       pushPasswordManagerStrategy,
       isFocused,
     })
@@ -434,10 +434,6 @@ 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,7 +39,3 @@ 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 { OTPInputMetadata, OTPInputProps } from './types'
+import { OTPInputProps } from './types'
 
 const PWM_BADGE_MARGIN_RIGHT = 18
 const PWM_BADGE_SPACE_WIDTH_PX = 40
@@ -15,13 +15,11 @@ 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
 }) {
@@ -106,7 +104,6 @@ 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