gluestack-ui icon indicating copy to clipboard operation
gluestack-ui copied to clipboard

Discord: I can't focus the input text if it is in a popover which is in a modal.

Open Viraj-10 opened this issue 4 months ago • 0 comments

Description

Hi Team ! First of all, thank you for your amazing work on Gluestack ! I have an issue with the following code, I can't focus the input text if if it is in a popover which is in a modal. Has someone a guess on how to fix it?

CodeSandbox/Snack link

No response

Steps to reproduce

Discord link : https://discord.com/channels/1050761204852858900/1071008851350016041/1205496584650100776

export default function Example() {
  const [showModal, setShowModal] = useState(false)
  const ref = useRef(null)
  const [showPopover, setShowPopover] = useState(false)

  return (
    <View>
      <Button onPress={() => setShowModal(true)} ref={ref}>
        <ButtonText>Show Modal</ButtonText>
      </Button>
      <Modal isOpen={showModal} onClose={() => {setShowModal(false)}}>
        <ModalBackdrop />
        <ModalContent>
          <ModalBody>
            <Popover
              isOpen={showPopover}
              onClose={() => setShowPopover(false)}
              onOpen={() => setShowPopover(true)}
              trigger={(triggerProps) => {
                return (
                  <Button {...triggerProps} sx={{margin: "$4"}}>
                    <ButtonText>Popover</ButtonText>
                  </Button>
                )
              }}
            >
              <PopoverBackdrop />
              <PopoverContent>
                <PopoverBody>
                  <Input
                    variant="outline"
                    size="md"
                    isDisabled={false}
                    isInvalid={false}
                    isReadOnly={false}
                    sx={{margin: "$4"}}
                  >
                    <InputField placeholder="Can't focus it" />
                  </Input>
                </PopoverBody>
              </PopoverContent>
            </Popover>
          </ModalBody>
        </ModalContent>
      </Modal>
    </View>
  );
}

gluestack-ui Version

latest

Platform

  • [ ] Expo
  • [ ] React Native CLI
  • [ ] Next
  • [X] Web
  • [X] Android
  • [X] iOS

Other Platform

No response

Additional Information

No response

Viraj-10 avatar Feb 14 '24 11:02 Viraj-10