'How to close a dropdown on a mousedown

Frontend noob here, please be nice.

I have a dropdown menu using ui.bootstrap.dropdown. The users of my website are used to copy-paste stuff from this dropdown. In order to do so, they usually click down inside the dropdown zone, select the text they want to copy a little too fast and release the click outside the dropdown zone. With this behaviour, the dropdown closes before the user could copy-paste their selection.

Instead of closing the dropdown on an mouseup event outside of the dropdown zone, could it be a mousedown event that would close the dropdown ?

htmlangularjsdropdownangular-ui-bootstrap


Solution 1:[1]

It all has to do with the auto-close setting. By default, it is set to always. With this setting, the dropdown collapses on any outside mouseup.

To be able to control it more finely, I had to use the auto-close="disabled" setting coupled with is-open="variable.isOpen".

Then, I created an callback on a mouse down event that is outside of the dropdown

    $('html').mousedown(function(e) {   
        if($scope.variable?.isOpen && !e.target?.closest('.classOfDropdown')) {
            $scope.variable.isOpen = false;
            $scope.$digest()             
        }
     });

I initialized $scope.variable inside the on-toggle callback.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Joseph Budin

Related Questions