Display AngularStrap Dropdown Manually - How?

Question

I am trying to display an AngularStrap dropdown manually, leveraging the trigger configuration on $dropdownProvider as such

// how dropdown is triggered - click | hover | focus | manual
app.config(function($dropdownProvider) {
    angular.extend($dropdownProvider.defaults, {
        trigger: 'manual'
    });
});

click hover focus all work fine, but why not manual? I have yet to discover any proof that this offered api configuration option works. How can I do this?

In fact, this issue seems to have been discovered after my original question positing, but is now closed and over a year later I have yet to find a solution still.

Issue: Documentation on how to use trigger=manual is missing

I have stubbed out an example that illustrates where I am struggling with this. To clarify my goal, I want to trigger the dropdown in my <textarea> on a keystroke (ng-model change). I am looking to get a hold on the dropdown and call a function to manually trigger it without using any of the default trigger options, specifically trigger: manual, and in an intuitive way to do so as should be offered according to the api, so the desired solution should not be constrained to any specific trigger - but entirely manual to accommodate many differing usages.

Plunker Link

---

<textarea ng-model="expression" intellisense></textarea>

---

app.directive('intellisense', [function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
          scope.$watch(attrs.ngModel, function (v) {
                if(v) {
                  // how do I trigger dropdown here on keystroke (model change)?
                }
            });
        }
    }
}]);

Hemmer

Answer 1

For anyone interested, after digging through the source code, I discovered an attribute on directive bsDropdown called bsShow with the following implementation.

// Visibility binding support
attr.bsShow && scope.$watch(attr.bsShow, function(newValue, oldValue) {
    if(!dropdown || !angular.isDefined(newValue)) return;
    if(angular.isString(newValue)) newValue = !!newValue.match(/true|,?(dropdown),?/i);
    newValue === true ? dropdown.show() : dropdown.hide();
});

This essentially drives the dropdown markup to include this and bind to a $scope value as such

<textarea id="textdrop" ng-model="expression" intellisense bs-dropdown="dropdown" bs-show="drop"></textarea>

Then within my directive I can trigger visibility by modifying $scope.drop as bound on bs-show="drop"

app.directive('intellisense', [function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
          scope.$watch(attrs.ngModel, function (v) {
                if(v) {
                  scope.drop = true; // simple - but works
                } else {
                  scope.drop = false;
                }
            });
        }
    }
}]);

---

It appears this was documented on a project commit as referenced here. The official documentation still makes no mention of this as the time of writing, and given the timeline of this I am surprised the lack of attention this has received.

Plunker Link with trigger: manual

Hemmer

@davidkonrad thanks for the positive feedback! It's too bad I forked up a bounty to just end up obsessing over this anyways lol – Hemmer

Answer 2

When I have a dropdown as above and want to trigger it manually, I add an id to the element :

<button id="myDropdown" type="button" class="btn btn-lg btn-primary" data-animation="am-flip-x" bs-dropdown="dropdown">
    Click to toggle dropdown
</button>

and then simply trigger the elements click() method :

$scope.dropdown = angular.element("#myDropdown");
...
$scope.dropdown.click();

demo -> http://plnkr.co/edit/v5AuBOiMN6TZCPE4eYk2?p=preview

This can be combined with angular-hotkeys :

hotkeys.bindTo($scope)
    .add({
        combo: '<key-combination>',
        description: '<description>',
        callback: function() {
            $scope.dropdown.click()
        }
    })

Leonard

Could you craft a plunk for this? I still can not get a manual trigger to fire the drop down. The documentation is totally lacking, and according to this issue It sounds like manual shouldn't even be part of the api as of yet if it's this involved – Hemmer

Also I have made an edit to the question. At this point I am not so much concerned with binding a key configuration -but great suggestion. I simply want to trigger the dropdown somehow – Hemmer

@salniro See this plnkr -> plnkr.co/edit/v5AuBOiMN6TZCPE4eYk2?p=preview it opens a dropdown by code as described above 1 sec after pageload. – Leonard

This is still not what I am aiming for. This isn't using the trigger: manual configuration. I don't want to use a click, Ideally, I want to trigger the dropdown on a keystroke in my <textarea> example – Hemmer

@salniro, yes - and you just call $scope.dropdown.click() in your (now deleted) directive, by hotkey or whatever when the desired keystroke occurs. – Leonard

I still don't see it. scope.dropdown.click() is undefined. I updated my plunker, it's still my directive, the logic fires on keystrokes. How can I trigger it there? – Hemmer

I also don't want to use click. I don't want to see dropdown when I click into textarea, I want to fire it manually, on a keystroke – Hemmer

If you add trigger: 'manual' to that example, it does not work. Please see my example with the <textarea> – Hemmer

You have altered your question so many times than the whole meaning is lost. My answer is an answer completely different to the version of your question above. But I let it stay because some other people for sure would like to know how to show a dropdown manually. – Leonard

I apologize for any confusion. I edited my question to address the specific issue of displaying the dropdown using the configuration trigger: manual. Your suggestion still includes and relies on trigger: click. Imo, the question is far easier to understand now without unnecessary distraction. The question always begged for a solution for manual though, which no suggestions addressed. – Hemmer

Yes, but the element that triggers the dropdown could be 0x0 in spread, have you thought about that? Have an empty <span> or <i> or <b> inside your element, with no length or height, you are doing your dropdowns from .. – Leonard

Answer 3

Manually triggering datepickers (or any dropdown) is now much easier with v2.0.4 of ngStrap. For more details, see this Github comment.

Here's a working plunk to demonstrate the datepicker as both a manually-triggered dropdown, and as a manually-triggered inline element.

<input type="text" ng-model="dropdownDatepicker.date" bs-datepicker data-trigger="manual" data-bs-show="dropdownDatepicker.show">

(And you really don't even need the data-trigger="manual", so you can leave that off if you want).

As for the intellisense directive, that doesn't sound like the issue here, so I'll leave that to you...

Flossie

this is great, but you are answering a different question - the poster asked about dropdowns. – Ambrosine

My answer is valid, I just used a datepicker for the example. Datepickers are dropdowns. It works the exact same way for any dropdown, as shown in the accepted answer, which has the same solution as mine (using bs-show or data-bs-show). – Flossie