1

I'm using angularstrap's bs-select to do a drop down list select. And I want to programmatically trigger the drop down list button with JavaScript. Here is the plunker:

Plunker Link

I want to use the button to trigger the drop down list. I've tried three methods:

  1. angular.element(document.querySelector("#test1")).triggerHandler('click');

it works with the elements with ng-click. But didn't work in bs-select

  1. document.getElementById("test1").click();

still didn't work for the triggerHandler('click')

  1. angular.element(document.querySelector("#test1")).triggerHandler('click'); $scope.$apply()

I thought it would be the problem that the scope need to digest again but it turns out that that is not the case.

And in angular strap the bs-select code is as follows:

$select.$onMouseDown = function(evt) {
    // Prevent blur on mousedown on .dropdown-menu
    evt.preventDefault();
    evt.stopPropagation();
    // Emulate click for mobile devices
    if(isTouch) {
        var targetEl = angular.element(evt.target);
        targetEl.triggerHandler('click');
    }
};

When it's mousdown it trigger the click on this button. So how can I do with it?

Thanks for the reply.

Gabriel
  • 601
  • 1
  • 10
  • 26
  • 1
    if you are using jquery then simply use `$(targetEl).trigger('click')` – Pankaj Parkar Jun 01 '15 at 18:59
  • @pankajparkar angular strap is not my code. And I'm using this angular strap library for some development. Since I'm using angular so I'm not using jquery. – Gabriel Jun 01 '15 at 19:01
  • @Gabriel are you willing to use angular strap dropdowns? – scniro Jun 02 '15 at 00:00
  • @salniro Yes, But I'm also making a walk through directive and inside the directive the dropdown will be triggered programmatically – Gabriel Jun 02 '15 at 20:48
  • @Gabriel I have answered the question to the best of my ability. I experienced the same thing and this issue caused grief for a while. I made lots of discoveries and the solution may be best found in using a dropdown. Please let me know if this helps? – scniro Jun 02 '15 at 21:24

2 Answers2

1

I experienced similar issues with AngularStrap. There is a configuration options on these directives called trigger with the optional value of manual. This is the configuration option we need to leverage in order to achieve what we want.

The problem with this, is there is no documentation anywhere on the usage of this. Since in comments you mentioned you are open to using AngularStrap Dropdowns, after much effort I found a solution to get this working. Observe this implementation of a Dropdown...

<button ng-model="expression" intellisense bs-dropdown="values" bs-show="drop">dropdown</button>

app.config(function($dropdownProvider) {
    angular.extend($dropdownProvider.defaults, {
        trigger: 'manual'
    });
});

You'll notice the attribute of bs-show on the element. This is the binding that will fire a drop based on a true or false value. Let's tie this to another elements ng-click event...

<button ng-click="fireDropDown()">Manually Drop</button>

$scope.fireDropDown = function() {
    $scope.drop = $scope.drop ? false : true;
}

I tried doing the same for a bs-select, but (not surprisingly) it is not working. Here are some additional resources that should help you in this.

Plunker Example - trigger dropdown manually

Display AngularStrap Dropdown Manually - How? - SO question I asked while beating my head on the issue

feat(tips,pickers): add bsShow visibility attr (fixes #723) - Fix that should have fixed this. Unsure why fix is not spanning across all directives including bs-select.

Community
  • 1
  • 1
scniro
  • 16,844
  • 8
  • 62
  • 106
-1

I finally figure out how to do with this. Here is the plunker:

plunker link

triggerHandler('click')

should be 

triggerHandler('mousedown')

As in the angular strap it's use onMouseDown as the event handler, so in the trigger handler I shouldn't use triggerHandler('click'). Instead, I should use triggerHandler('mousedown') to trigger the event. And it works now.

Gabriel
  • 601
  • 1
  • 10
  • 26
  • I am not particularity thrilled about the unaccept. This solution is not ideal. You're hacking a click event when the api offers a manual configuration for this specific scenario. You have also lost the ability to hide your dropdown now, which you'll likely leverage more hacks as a workaround. Binding to a variable is ideal – scniro Jun 04 '15 at 18:00
  • @salniro So I'm implementing a automated walkthrough of the app and I'll programmatically click the item in the dropdown list. And the app is already finished with bs-select and it's painful to change it to dropdown for a single walkthrough function. So I hope it help somebody else with the same issue. – Gabriel Jun 04 '15 at 23:49