Hi i would like to work on this issue

Hi @packirisamykaran! Sure, thanks for the initiative! Before you start work, could you sign our Contributor License Agreement? Thank you!

Hi @packirisamykaran! Sure, thanks for the initiative! Before you start work, could you sign our Contributor License Agreement? Thank you!

Alright, I have signed.

Hi @packirisamykaran, sorry, could you fill in the form again here: https://go.gov.sg/ogp-cla-2023? We didn't receive your response the previous time. After which, you can start on your development if you haven't already! 👍

Hi @packirisamykaran, sorry, could you fill in the form again here: https://go.gov.sg/ogp-cla-2023? We didn't receive your response the previous time. After which, you can start on your development if you haven't already! 👍

Alright no worries, I have submitted it again. Let me know if you have received it

Hi @packirisamykaran, sorry, could you fill in the form again here: https://go.gov.sg/ogp-cla-2023? We didn't receive your response the previous time. After which, you can start on your development if you haven't already! 👍

Alright no worries, I have submitted it again. Let me know if you have received it

Yup, got it! Thank you!

Hi @packirisamykaran, sorry, could you fill in the form again here: https://go.gov.sg/ogp-cla-2023? We didn't receive your response the previous time. After which, you can start on your development if you haven't already! 👍

Alright no worries, I have submitted it again. Let me know if you have received it

Yup, got it! Thank you!

Great thanks

Hello @LinHuiqing, I am new to contributing to open-source projects and I am unable to log in due to not being on the whitelist. can I only locate and resolve the issue by browsing through the repository?

Hello @LinHuiqing, I am new to contributing to open-source projects and I am unable to log in due to not being on the whitelist. can I only locate and resolve the issue by browsing through the repository?

Hey @packirisamykaran! When developing on your local environment, you can login with any hypothetical email ending with "gov.sg". The OTP will printed through to terminal on the backend, or you can use the MailDev server to receive incoming mails at https://localhost:1080.

Hello @LinHuiqing, I am new to contributing to open-source projects and I am unable to log in due to not being on the whitelist. can I only locate and resolve the issue by browsing through the repository?

Hey @packirisamykaran! When developing on your local environment, you can login with any hypothetical email ending with "gov.sg". The OTP will printed through to terminal on the backend, or you can use the MailDev server to receive incoming mails at https://localhost:1080.

Ok it works. thank you

Hi @LinHuiqing, I would like to work on this issue! I have already signed the CLA.

Hi @LinHuiqing, I would like to work on this issue! I have already signed the CLA.

Hey @LeonardYam, sorry for the late reply. Sure, go ahead, thanks!

Hi @LinHuiqing, I've discovered the issue - <FloatingPortal> portals the dropdown options into the document body which renders above everything in the app. We can fix this by removing the portal from SelectMenu.tsx and adding an appropriate z-index as shown below.

An alternative would be to keep the portal but pass a suitable DOM node to append the dropdown options. Let me know which approach is preferred here :)

Hi @LinHuiqing, I've discovered the issue - <FloatingPortal> portals the dropdown options into the document body which renders above everything in the app. We can fix this by removing the portal from SelectMenu.tsx and adding an appropriate z-index as shown below.

Recording.mov

An alternative would be to keep the portal but pass a suitable DOM node to append the dropdown options. Let me know which approach is preferred here :)

Hi @LeonardYam, sorry for the delayed replies as I'm travelling 😅 I think the former approach will work, thanks! Do open a PR with the fix and we'll review accordingly. Thank you!

Updating this issue.

From UX point of view, the intended interaction should be to close the popover when scrolled out of view (including under the header). This is to ensure that users are not interacting with elements that are outside of their viewport