Fixed the behavior of dropdownlist when clicked outside of its scope.

[raghav1030]

Fixes

Closes #1829

Changes proposed

1. Added a useOnClickOutside Hook to capture mouse events when clicked outside the scope of any element.
2. Implemented useOnClickOutside hook on dropdown list for category section

Screenshots

Same behavior as quoted in #1829

Note to reviewers

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
linkshub	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 11, 2023 7:07am

[github-actions]

Thank you, raghav1030, for creating this pull request and contributing to LinksHub! 💗

The maintainers will review this Pull Request and provide feedback as soon as possible! 😇
We appreciate your patience and contribution, Keep up the great work! 😀

[CBID2]

Can you post a screenshot of your solution in the screenshot form @raghav1030?

[raghav1030]

Can you post a screenshot of your solution in the screenshot form @raghav1030?

It can't be seen in a screenshot. It behaves same as I mentioned in the issue #1829 . You can check the screen recordings that I provided in that issue. Still, if you need those again, Please tell?

ps : you can check the expected behavior screen recording in the issue #1829 to judge what I have done in this PR

[CBID2]

Well done @raghav1030! @Anmol-Baranwal, you're up! :)

[Anmol-Baranwal]

Remove console log.

[raghav1030]

Removed the unnecessary console.log(). Please tell if there's any other room for improvement?

[Anmol-Baranwal]

@raghav1030

After clicking the header: where social icons are present.

The category sidebar closes, but it doesn't redirect to home page. Please make the change to incorporate this.

[rupali-codes]

I'm experiencing this bug here, not just outside of the sidebar, it closing the category dropdown when I'm clicking anywhere, can we fix this?

LinksHub.-.Frontend_animations.-.Brave.2023-10-08.16-00-49.mp4

[raghav1030]

@raghav1030

After clicking the header: where social icons are present.

The category sidebar closes, but it doesn't redirect to home page. Please make the change to incorporate this.

I just want to know what changes do you expect when a user clicks outside and the dropdown closes?

Possible Behaviors :

1. Navigate to home page whenever the dropdown is closed no matter what user is doing.

OR

2. Retain the page state and navigate to home page only when the logo is clicked.

[raghav1030]

I'm experiencing this bug here, not just outside of the sidebar, it closing the category dropdown when I'm clicking anywhere, can we fix this?

LinksHub.-.Frontend_animations.-.Brave.2023-10-08.16-00-49.mp4

Thanks for noticing, I have fixed this issue and will commit changes once I get clarity on the previous comment. :)

[rupali-codes]

@raghav1030 it should close the dropdown when clicked outside of the sidebar, but not when clicking on buttons or icons

[raghav1030]

@raghav1030 it should close the dropdown when clicked outside of the sidebar, but not when clicking on buttons or icons

Yeah I have solved that bug, I am talking about the changes as requested by @Anmol-Baranwal.
What should be rendered on the outlet when clicked on navbar where social links are present?

[raghav1030]

@raghav1030

After clicking the header: where social icons are present.

The category sidebar closes, but it doesn't redirect to home page. Please make the change to incorporate this.

This comment :)

[Anmol-Baranwal]

This comment :)

It needs to redirect to the home page. Either it shouldn't close drop-down menu, or if it does then redirect to home page screen.

[raghav1030]

I have made all the necessary changes. Please check if the issue still persists in any case. I have restricted all potential elements to inherit this click outside behavior where it could have misbehaved.

Fyi : I have added a "data-custom='restrict-click-outside' " attribute in each component where i want to restrict the onClickOutside hook's functionality. I have made such a change that if anyone needs to restrict any component, then one has to add this attribute to the parent HTML element and the property will be applied to its each and every child element/component. In short, on applying this custom data attribute, the element and its children will not allow the dropdown list to close.

[Anmol-Baranwal]

@rupali-codes
Check on clicking the logo icon, is it behaving correctly. It isn't visible in the screen recording, but it's there when I clicked it.

Let me know, I will approve it.

[raghav1030]

@rupali-codes Check on clicking the logo icon, is it behaving correctly. It isn't visible in the screen recording, but it's there when I clicked it.

Let me know, I will approve it.

Sure, here it is.

2023-10-09.23-49-58.mp4

[rupali-codes]

@raghav1030 it works fine for the card and its popup. Can you do the same for topbar icons?

[raghav1030]

@raghav1030 it works fine for the card and its popup. Can you do the same for topbar icons?

Just added the required functionality. In this commit I restricted the topbar icons to close the dropdown list upon clicking.

You can check how it works now :

2023-10-10.20-37-30.mp4

Please tell if there's any room for improvement?

[Anmol-Baranwal]

@raghav1030
Please solve the merge conflicts carefully by cross checking the code from the current codebase, or if you are unsure. Let me know, I will do it whenever I'm free.

[Anmol-Baranwal]

@rupali-codes
I think, this works fine. So, maybe we can go ahead.

[CBID2]

@rupali-codes I think, this works fine. So, maybe we can go ahead.

After the merge conflicts are solved of course @raghav1030! :)

[rupali-codes]

looks perfect to me

[rupali-codes]

@raghav1030 we are experiencing some bugs,, when i click on this pagination buttons, its closing the dropdown and never going to the other page. so fix it, can you one thing, just close the dropdown when clicked on the Topbar only, not anywhere else. Please me or @Anmol-Baranwal if you need any assistance, and we want this to be fixed ASAP.

[rupali-codes]

@raghav1030 this is breaking the current codebase, we'll have to revert this PR in order to fix the current situation, please raise a NEW PR containing all the changes of this PR and the suggested one (pagination bug).