I’m building a semi-complex nav bar using with bootstrap 5 and ReactJS. For this, I’m using a dropdown menu.
When I click inside of the dropdown anywhere (even if the part I’m clicking on is just plain text and not a link), the dropdown closes and I have no idea why. I’ve tried adding the data-bs-auto-close prop and have set it to inside, outside and false and it doesn’t seem to have any effect.
Here is a very basic code example of my problem – the left side of the dropdown (where it just has a small header saying Hi) shouldn’t trigger the dropdown to close:
https://codesandbox.io/s/bootstrap-5-playground-forked-drrly7?file=/index.html
Any help here would be appreciated!
>Solution :
You’re using an old version of bootstrap. Use the latest version. It will work. I’ve tried in your codesandbox.
https://getbootstrap.com/docs/5.3/getting-started/introduction