var Component=(()=>{var h=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),f=(a,e)=>{for(var l in e)r(a,l,{get:e[l],enumerable:!0})},t=(a,e,l,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of u(e))!y.call(a,s)&&s!==l&&r(a,s,{get:()=>e[s],enumerable:!(c=p(e,s))||c.enumerable});return a};var k=(a,e,l)=>(l=a!=null?h(m(a)):{},t(e||!a||!a.__esModule?r(l,"default",{value:a,enumerable:!0}):l,a)),N=a=>t(r({},"__esModule",{value:!0}),a);var i=v((S,o)=>{o.exports=_jsx_runtime});var g={};f(g,{default:()=>b,frontmatter:()=>w});var n=k(i()),w=void 0;function d(a){let e={a:"a",code:"code",h1:"h1",p:"p",pre:"pre",span:"span",...a.components},{EpicVideo:l}=e;return l||D("EpicVideo",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:"Focus Management"}),` `,(0,n.jsx)(l,{url:"https://www.epicreact.dev/workshops/advanced-react-apis/intro-to-focus-management"}),` `,(0,n.jsx)(e.p,{children:`Helping the user's focus stay on the right place is a key part of the user experience. This is especially important for users who rely on screen readers or keyboard navigation. But even able users can benefit from a well-thought focus management experience.`}),` `,(0,n.jsx)(e.p,{children:`Sometimes, the element you want to focus on only becomes available after a state update. For example:`}),` `,(0,n.jsx)(e.pre,{"data-line-numbers":"true","data-lang":"tsx",style:{color:"var(--base05)",backgroundColor:"var(--base00)"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"1",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"MyComponent"}),"() {",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"2",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," [",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"show"}),", ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"setShow"}),"] ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"useState"}),"(",(0,n.jsx)(e.span,{style:{color:"var(--base09)"},children:"false"}),")",` `]}),(0,n.jsx)(e.span,{className:"codeblock-line","data-line-number":"3",children:` `}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," (",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"}),">",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"6",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"button"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"onClick"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),"() ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"=>"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"setShow"}),"(",(0,n.jsx)(e.span,{style:{color:"var(--base09)"},children:"true"}),")",(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),">Show",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"7",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"show"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"?"})," <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"input"})," /> ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base09)"},children:"null"}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"8",children:[" ",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"9",children:[" )",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"10",children:["}",` `]})]})}),` `,(0,n.jsx)(e.p,{children:`Presumably after the user clicks "show" they will want to type something in the input there. Good focus management would focus the input after it becomes visible.`}),` `,(0,n.jsx)(e.p,{children:`It's important for you to know that in React state updates happen in batches. So state updates do not necessarily take place at the same time you call the state updater function.`}),` `,(0,n.jsx)(e.p,{children:`As a result of React state update batching, if you try to focus an element right after a state update, it might not work as expected. This is because the element you want to focus on might not be available yet.`}),` `,(0,n.jsx)(e.pre,{"data-remove":"10","data-line-numbers":"true","data-lang":"tsx",style:{color:"var(--base05)",backgroundColor:"var(--base00)"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"1","data-diff-line-number":"1",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"MyComponent"}),"() {",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"2","data-diff-line-number":"2",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"inputRef"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"useRef"}),"<",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"HTMLInputElement"}),">(",(0,n.jsx)(e.span,{style:{color:"var(--base09)"},children:"null"}),")",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3","data-diff-line-number":"3",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," [",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"show"}),", ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"setShow"}),"] ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"useState"}),"(",(0,n.jsx)(e.span,{style:{color:"var(--base09)"},children:"false"}),")",` `]}),(0,n.jsx)(e.span,{className:"codeblock-line","data-line-number":"4","data-diff-line-number":"4",children:` `}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5","data-diff-line-number":"5",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," (",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"6","data-diff-line-number":"6",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"}),">",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"7","data-diff-line-number":"7",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"button"}),` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"8","data-diff-line-number":"8",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"onClick"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),"() ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"=>"})," {",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"9","data-diff-line-number":"9",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"setShow"}),"(",(0,n.jsx)(e.span,{style:{color:"var(--base09)"},children:"true"}),")",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"10","data-remove":!0,"data-diff-line-number":"9",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"inputRef"}),".",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"current"}),"?.",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"focus"}),"() ",(0,n.jsx)(e.span,{style:{color:"var(--base03)"},children:"// This probably won't work"}),` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"11","data-diff-line-number":"10",children:[" }",(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"12","data-diff-line-number":"11",children:[" >",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"13","data-diff-line-number":"12",children:[" Show",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"14","data-diff-line-number":"13",children:[" ",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"15","data-diff-line-number":"14",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"show"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"?"})," <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"input"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"ref"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"inputRef"}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," /> ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base09)"},children:"null"}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"16","data-diff-line-number":"15",children:[" ",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"17","data-diff-line-number":"16",children:[" )",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"18","data-diff-line-number":"17",children:["}",` `]})]})}),` `,(0,n.jsx)(e.p,{children:`The solution to this problem is to force React to run the state and DOM updates synchronously so that the element you want to focus on is available when you try to focus it.`}),` `,(0,n.jsxs)(e.p,{children:["You do this by using the ",(0,n.jsx)(e.code,{children:"flushSync"})," function from the ",(0,n.jsx)(e.code,{children:"react-dom"})," package."]}),` `,(0,n.jsx)(e.pre,{"data-line-numbers":"true","data-lang":"tsx",style:{color:"var(--base05)",backgroundColor:"var(--base00)"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"1",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"import"})," { ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"flushSync"})," } ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"from"})," ","'",(0,n.jsx)(e.span,{style:{color:"var(--base0B)"},children:"react-dom"}),"'",` `]}),(0,n.jsx)(e.span,{className:"codeblock-line","data-line-number":"2",children:` `}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"3",children:[(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"function"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"MyComponent"}),"() {",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"4",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"inputRef"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"useRef"}),"<",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"HTMLInputElement"}),">(",(0,n.jsx)(e.span,{style:{color:"var(--base09)"},children:"null"}),")",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"5",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0A)"},children:"const"})," [",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"show"}),", ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"setShow"}),"] ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"useState"}),"(",(0,n.jsx)(e.span,{style:{color:"var(--base09)"},children:"false"}),")",` `]}),(0,n.jsx)(e.span,{className:"codeblock-line","data-line-number":"6",children:` `}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"7",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"return"})," (",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"8",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"div"}),">",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"9",children:[" <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"button"}),` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"10",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"onClick"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),"() ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"=>"})," {",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"11",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"flushSync"}),"(() ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"=>"})," {",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"12",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"setShow"}),"(",(0,n.jsx)(e.span,{style:{color:"var(--base09)"},children:"true"}),")",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"13",children:[" })",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"14",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"inputRef"}),".",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"current"}),"?.",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"focus"}),"()",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"15",children:[" }",(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"16",children:[" >",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"17",children:[" Show",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"18",children:[" ",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"19",children:[" ",(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"show"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"?"})," <",(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"input"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base0D)"},children:"ref"}),(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--base08)"},children:"inputRef"}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"})," /> ",(0,n.jsx)(e.span,{style:{color:"var(--base0E)"},children:":"})," ",(0,n.jsx)(e.span,{style:{color:"var(--base09)"},children:"null"}),(0,n.jsx)(e.span,{style:{color:"var(--base0F)"},children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"20",children:[" ",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"21",children:[" )",` `]}),(0,n.jsxs)(e.span,{className:"codeblock-line","data-line-number":"22",children:["}",` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["What ",(0,n.jsx)(e.code,{children:"flushSync"}),` does is that it forces React to run the state update and DOM update synchronously. This way, the input element will be available when you try to focus it on the line following the `,(0,n.jsx)(e.code,{children:"flushSync"})," call."]}),` `,(0,n.jsx)(e.p,{children:`In general you want to avoid this de-optimization, but in some cases (like focus management), it's the perfect solution.`}),` `,(0,n.jsxs)(e.p,{children:["Learn more in ",(0,n.jsxs)(e.a,{href:"https://react.dev/reference/react-dom/flushSync",children:["\u{1F4DC} the ",(0,n.jsx)(e.code,{children:"flushSync"})," docs"]}),"."]})]})}function b(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function D(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return N(g);})(); ;return Component;

08. Focus Management/Elaboration