Nested Modal can not enter text in Input because it can not focus

[TVGSOFT]

Description

When using nested Modal and in the second Modal contains Input then that Input can not key in

CodeSandbox/Snack link

https://snack.expo.dev/-epRgAGlT

Steps to reproduce

We have 2 modals:

1. Modal 1 will show Modal 2:

   <Modal isOpen={showModal} onClose={() => setShowModal(false)} size="lg">
       <Modal.Content maxWidth="350">
         <Modal.CloseButton />
         <Modal.Header>Order</Modal.Header>
         <Modal.Body>
           <VStack space={3}>
             <HStack alignItems="center" justifyContent="space-between">
               <Text fontWeight="medium">Sub Total</Text>
               <Text color="blueGray.400">$298.77</Text>
             </HStack>
             <HStack alignItems="center" justifyContent="space-between">
               <Text fontWeight="medium">Tax</Text>
               <Text color="blueGray.400">$38.84</Text>
             </HStack>
             <HStack alignItems="center" justifyContent="space-between">
               <Text fontWeight="medium">Total Amount</Text>
               <Text color="green.500">$337.61</Text>
             </HStack>
           </VStack>
         </Modal.Body>
         <Modal.Footer>
           <Button flex="1" onPress={() => {
           setShowModal2(true);
         }}>
             Continue
           </Button>
         </Modal.Footer>
       </Modal.Content>
     </Modal>

2. Modal 2 contains an Input:

<Modal isOpen={showModal2} onClose={() => setShowModal2(false)} size="lg" initialFocusRef={initialRef}>
        <Modal.Content maxWidth="350">
          <Modal.CloseButton />
          <Modal.Header>Select Address</Modal.Header>
          <Modal.Body>
            <Radio.Group defaultValue="address1" name="address" size="sm">
              <VStack space={3}>
                <Radio alignItems="flex-start" _text={{
                mt: "-1",
                ml: "2",
                fontSize: "sm"
              }} value="address1">
                  4140 Parker Rd. Allentown, New Mexico 31134
                </Radio>
                <Radio alignItems="flex-start" _text={{
                mt: "-1",
                ml: "2",
                fontSize: "sm"
              }} value="address2">
                  6391 Elign St. Celina, Delaware 10299
                </Radio>
              </VStack>
            </Radio.Group>

            <FormControl>
              <FormControl.Label>Name</FormControl.Label>
              <Input ref={initialRef} auto />
            </FormControl>
            <FormControl mt="3">
              <FormControl.Label>Email</FormControl.Label>
              <Input />
            </FormControl>
          </Modal.Body>
          <Modal.Footer>
            <Button flex="1" onPress={() => {
            setShowModal3(true);
          }}>
              Continue
            </Button>
          </Modal.Footer>
        </Modal.Content>
      </Modal>

Then can not key in the Input

I think the reason because Modal is using FocusScope as below:

{animationPreset === 'slide' ? (
          <Slide in={visible} {..._slide}>
            <FocusScope
              contain={visible}
              autoFocus={visible && !initialFocusRef}
              restoreFocus={visible && !finalFocusRef}
            >
              {child}
            </FocusScope>
          </Slide>
        ) : (
          <Fade in={visible} style={StyleSheet.absoluteFill} {..._fade}>
            <FocusScope
              contain={visible}
              autoFocus={visible && !initialFocusRef}
              restoreFocus={visible && !finalFocusRef}
            >
              {child}
            </FocusScope>
          </Fade>
        )}

If I remove FocusScope then it worked.

NativeBase Version

3.4.17

Platform

• [ ] Android
• [ ] CRA
• [X] Expo
• [ ] iOS
• [ ] Next

Other Platform

No response

Additional Information

No response

[ankit-tailor]

Hey @TVGSoft, Thanks for reporting the issue. We'll look into it.

[sahilvasuja]

Hey @TVGSoft, you can try this code https://snack.expo.dev/@sahil_vasuja/nested-modal-can-not-enter-text-in-input-because-it-can-not-focus