I have been developing a custom dropdown menu directive in AngularJS. The issue I'm facing is that the buttons in my template become inactive when interacting with the dropdown menu, unlike a regular HTML select which remains active while the dropdown is open. I aim to incorporate this functionality into my directive so that the button stays active until the dropdown is closed.
When a dropdown is active, it should look like this:
However, this is how mine appears when interacting with it and the button becomes inactive. I want the button to stay active until the dropdown is closed:
Below is the code snippet for my directive:
var app_dropdowns = angular.module('dropdown.directives', ['offClick']);
app_dropdowns.directive('dropdownMultiselect', function() {
// Directive implementation
});
In addition, I am working on styling the dropselect class with CSS:
.dropselect,
.dropselect:hover {
/* CSS styles */
}
.dropselect:active,
.dropselect:focus {
/* Additional styles for active/focused state */
}
To further illustrate, here is a fiddle: https://jsfiddle.net/krd3y6dx/7/