Prevent Bootstrap 4 Dropdown from closing onClick using React without jQuery - javascript

I'm having trouble to get things right with the Bootstrap Dropdown. I can't use react-strap and reactbootstrap is not supporting bs4 yet.
What I want is that a dropdown doesn't close if if select an element and only if I click outside of the dropdown menu. I don't want to use jQuery and would like to stick to react. I was thinking of removing data-toggle="dropdown" form the dropdown element, as this seems to be the one that adds the show class to the dropdown-menu. After that I would try to implement my own logic, so that it follows my rules.
But still, because I hope that there is an easier/better way, I wanted to asked if anyone has any experience with that?

Related

Displaying a select box on click start in React DnD?

Displaying a select box on click start in React DnD?
https://react-dnd.github.io/react-dnd/examples/nesting/drag-sources
I read the docs, but I don't see anything that allows me to show a select box. I am wondering if there's an easy way to do this, or I need to implement some low-level vanilla js code like the author of vi-select did:
https://github.com/Simonwep/selection/blob/01d781ead3768aa2e1b78489b0c88a0f2e9c3597/packages/vanilla/src/index.ts
Is there some solution in simple React?

Has anyone had an issue with the bootstrap 5 offcanvas and the jquery ui front class?

My problem is that the site I am current working on is set up with bootstrap 5 and has offcanvas class that seems to be causing a lot of issues based off its z-index. I recently added the jquery autocomplete api based off of a request to remove the old one. I am trying to use the 'appendTo' method to ensure that the dropdown for autocomplete doesnt move when scrolling but every time I add the ui-front class to the offcanvas element I want to appendTo I cant see the autosuggest anymore. I assume the code isnt breaking as im not getting any errors but im not sure how to about fixing this.

toggle switch only on confirmation from the user using angular, typescript

I have a toggle switch. when i turn it off and based on a variable, a pop up modal will be displayed asking to confirm the turn off. if user clicks on turn off button , only then the toggle should turn off. if user clicks on cancel button in the modal, then the toggle should not turn off , it should be in on state only. I found solutions for this problem using jQuery. but I don't want to use jQuery. so please give solutions in angular, typescript, bootstrap. I'm new to angular. hence it would be more understandable if you could explain the solution. thanks in advance.
Have you got the modal working yet? I assume you're using event AND two way binding on the toggel to listed for changs. You should be able to pass data back from the modal - perhaps a boolean, then you can set the toggle's value based what was passed back from the modal.

bootstrap collapse does not animate when opened programmatically

I have a site with a bootstrap collapse in it. I am trying to make it open programatically when the user selects a certain radio button, its working but the collapse does not animate in it just pops in.
The code I'm using is:
$("#RadioBtn").on('change', function(){
$("#RadioCollapse").addClass('in');
})
I suspect I may have to do something involving the collapsing class, but I try applying that class to the element and it didn't animate either.
Just found bootstrap has its own built in function .collapse(); so all I had to do was
$("#RadioCollapse").collapse();

Twitter Bootstrap - dropdown with div content instead of a list

What's the recommended way to do this?
Here's an example of what I've done http://jsfiddle.net/T9QHw/56/
Normal dropdown on the left, and the div version on the right.
But the div acts a little funny. It closes itself if I click on it, and styles a tags as blocks.
Should I be doing this a different way?
Perhaps you want to be using the Popover component instead of the Dropdown component?

Categories