var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var k=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),b=(e,n)=>{for(var o in n)r(e,o,{get:n[o],enumerable:!0})},a=(e,n,o,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of p(n))!g.call(e,t)&&t!==o&&r(e,t,{get:()=>n[t],enumerable:!(s=h(n,t))||s.enumerable});return e};var F=(e,n,o)=>(o=e!=null?u(f(e)):{},a(n||!e||!e.__esModule?r(o,"default",{value:e,enumerable:!0}):o,e)),x=e=>a(r({},"__esModule",{value:!0}),e);var c=k((S,l)=>{l.exports=_jsx_runtime});var w={};b(w,{default:()=>d,frontmatter:()=>V});var i=F(c()),V={title:"Formik Loses Focus With React",description:"Custom field component loses focus when typing a single character",date:"2024-04-02T09:19:42.550Z",mtime:"2024-08-12T08:43:58.010Z",draft:!1,preview:"",tags:["react","formik"],type:"shorts"};function m(e){let n={a:"a",blockquote:"blockquote",code:"code",h2:"h2",li:"li",p:"p",span:"span",ul:"ul",...e.components},{Pre:o}=n;return o||y("Pre",!0),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.blockquote,{children:[` `,(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/jaredpalmer/formik/issues/882",children:"Custom field component loses focus when typing a single character"})}),` `]}),` `,(0,i.jsxs)(n.h2,{id:"question",children:[(0,i.jsx)(n.a,{className:"hash-anchor",href:"#question",children:(0,i.jsx)(n.span,{className:"icon icon-link"})}),"Question"]}),` `,(0,i.jsxs)(n.p,{children:["When ",(0,i.jsx)(n.code,{children:"isValidating"})," worked in Formik callback, the input loses focus when typing a single character."]}),` `,(0,i.jsx)(o,{codeblock:{value:` {({ isSubmitting, handleSubmit, submitForm, isValidating }) => { const disabled = isSubmitting || isValidating; return ( ); }} `,lang:"tsx",meta:""}}),` `,(0,i.jsxs)(n.h2,{id:"resolve",children:[(0,i.jsx)(n.a,{className:"hash-anchor",href:"#resolve",children:(0,i.jsx)(n.span,{className:"icon icon-link"})}),"Resolve"]}),` `,(0,i.jsxs)(n.ul,{children:[` `,(0,i.jsxs)(n.li,{children:["Removed ",(0,i.jsx)(n.code,{children:"isValidating"})]}),` `,(0,i.jsxs)(n.li,{children:["Use ",(0,i.jsx)(n.code,{children:"formikRef"})]}),` `]}),` `,(0,i.jsx)(o,{codeblock:{value:`const formikRef = useRef>(null); const isValidating = formikRef.current?.isValidating; {() => { ...isValidating }} `,lang:"tsx",meta:""}})]})}function d(e={}){let{wrapper:n}=e.components||{};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(m,{...e})}):m(e)}function y(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(w);})(); ;return Component;