gluestack-ui
gluestack-ui copied to clipboard
Discord: I can't focus the input text if it is in a popover which is in a modal.
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