@@ -143,7 +143,7 @@ export const StressTest = ({width, height, subtitle}: DialogStoryProps) => {
143143 footerButtons = { [
144144 ...manyButtons ,
145145 { buttonType : 'danger' , content : 'Delete the universe' , onClick : onDialogClose } ,
146- { buttonType : 'primary' , content : 'Proceed' , onClick : openSecondDialog , autoFocus : true } ,
146+ { buttonType : 'primary' , content : 'Proceed' , onClick : openSecondDialog } ,
147147 ] }
148148 >
149149 { lipsum }
@@ -164,6 +164,10 @@ export const ReproMultistepDialogWithConditionalFooter = ({width, height}: Dialo
164164 const onDialogClose = useCallback ( ( ) => setIsOpen ( false ) , [ ] )
165165 const [ step , setStep ] = React . useState ( 1 )
166166
167+ const [ inputText , setInputText ] = React . useState ( '' )
168+
169+ const dialogRef = useRef < HTMLDivElement > ( null )
170+
167171 const renderFooterConditionally = ( ) => {
168172 if ( step === 1 ) return null
169173
@@ -174,6 +178,14 @@ export const ReproMultistepDialogWithConditionalFooter = ({width, height}: Dialo
174178 )
175179 }
176180
181+ React . useEffect ( ( ) => {
182+ // focus the close button when the step changes
183+ const focusTarget = dialogRef . current ?. querySelector ( 'button[aria-label="Close"]' ) as HTMLButtonElement
184+ if ( step === 2 ) {
185+ focusTarget . focus ( )
186+ }
187+ } , [ step ] )
188+
177189 return (
178190 < >
179191 < Button onClick = { ( ) => setIsOpen ( ! isOpen ) } > Show dialog</ Button >
@@ -185,6 +197,7 @@ export const ReproMultistepDialogWithConditionalFooter = ({width, height}: Dialo
185197 renderFooter = { renderFooterConditionally }
186198 onClose = { onDialogClose }
187199 footerButtons = { [ { buttonType : 'primary' , content : 'Proceed' } ] }
200+ ref = { dialogRef }
188201 >
189202 { step === 1 ? (
190203 < Box sx = { { display : 'flex' , flexDirection : 'column' , gap : 4 } } >
@@ -196,12 +209,17 @@ export const ReproMultistepDialogWithConditionalFooter = ({width, height}: Dialo
196209 </ Box >
197210 </ Box >
198211 ) : (
199- < p >
212+ < div >
200213 < Box sx = { { display : 'flex' , flexDirection : 'column' , gap : 1 } } >
201214 < label htmlFor = "description" > Description</ label >
202- < TextInput id = "description" placeholder = "Write the description here" />
215+ < TextInput
216+ id = "description"
217+ placeholder = "Write the description here"
218+ value = { inputText }
219+ onChange = { event => setInputText ( event . target . value ) }
220+ />
203221 </ Box >
204- </ p >
222+ </ div >
205223 ) }
206224 </ Dialog >
207225 ) }
@@ -330,3 +348,56 @@ export const NewIssues = () => {
330348 </ >
331349 )
332350}
351+
352+ export const RetainsFocusTrapWithDynamicContent = ( ) => {
353+ const [ isOpen , setIsOpen ] = useState ( false )
354+ const [ secondOpen , setSecondOpen ] = useState ( false )
355+ const [ expandContent , setExpandContent ] = useState ( false )
356+ const [ changeBodyContent , setChangeBodyContent ] = useState ( false )
357+
358+ const buttonRef = useRef < HTMLButtonElement > ( null )
359+ const onDialogClose = useCallback ( ( ) => setIsOpen ( false ) , [ ] )
360+ const onSecondDialogClose = useCallback ( ( ) => setSecondOpen ( false ) , [ ] )
361+ const openSecondDialog = useCallback ( ( ) => setSecondOpen ( true ) , [ ] )
362+
363+ const renderFooterConditionally = ( ) => {
364+ if ( ! changeBodyContent ) return null
365+
366+ return (
367+ < Dialog . Footer >
368+ < Button variant = "primary" > Submit</ Button >
369+ </ Dialog . Footer >
370+ )
371+ }
372+
373+ return (
374+ < >
375+ < Button ref = { buttonRef } onClick = { ( ) => setIsOpen ( ! isOpen ) } >
376+ Show dialog
377+ </ Button >
378+ { isOpen && (
379+ < Dialog title = "My Dialog" onClose = { onDialogClose } renderFooter = { renderFooterConditionally } >
380+ < Button onClick = { ( ) => setExpandContent ( ! expandContent ) } >
381+ Click me to dynamically { expandContent ? 'remove' : 'render' } content
382+ </ Button >
383+ < Button onClick = { ( ) => setChangeBodyContent ( ! changeBodyContent ) } >
384+ Click me to { changeBodyContent ? 'remove' : 'add' } a footer
385+ </ Button >
386+ < Button onClick = { openSecondDialog } > Click me to open a new dialog</ Button >
387+ { expandContent && (
388+ < Box >
389+ { lipsum }
390+ < Button > Dialog Button Example 1</ Button >
391+ < Button > Dialog Button Example 2</ Button >
392+ </ Box >
393+ ) }
394+ { secondOpen && (
395+ < Dialog title = "Inner dialog!" onClose = { onSecondDialogClose } width = "small" >
396+ Hello world
397+ </ Dialog >
398+ ) }
399+ </ Dialog >
400+ ) }
401+ </ >
402+ )
403+ }
0 commit comments