These are chat archives for angular/material

20th
May 2015
Dave Ackerman
@dmackerman
May 20 2015 13:17
is there anyway to get around the autofocus on mdBottomSheet?
my issue: angular/material#2313
Wills Bithrey
@WillsB3
May 20 2015 13:20
@dmackerman Could you not implement your own directive (akin to what md-bottom-sheet-focus will look like? I haven't checked the API of mdBottomSheet but perhaps you can require it's controller from your directive and the API exposed via mdBottomSheet's Controller to detect when it's opened and call .focus() on whatever element your custom directive is on.
I might be missing something, as I've not used ngMaterial in a few months (so just take these as ideas...)
(Sorry if that's response seemed obvious, it's the only idea I have ;))
Dave Ackerman
@dmackerman
May 20 2015 13:35
Yeah, we do have our own focus directive, but it gets overriden by the events that get fired from mdBottomSheet by default ;)
like, the field will focus (because of our directive), and then de-focus
but that’s a good idea Wills. i’ll see what I can hack around that.
borodaalex
@borodaalex
May 20 2015 14:43

Hi all!

I have the question how to correctly manage md-autocomplete inside md-dialog.
My scenario is the next: when i type something inside md-autocomplete and want to discard results i press esc button
and want to dismiss auto-complete result but not close dialog.
Now dialog is closing.

Dave Ackerman
@dmackerman
May 20 2015 15:55
i’m going to open a PR for this feature. seems trivial to add
Wills Bithrey
@WillsB3
May 20 2015 15:56
@dmackerman You might be able to work around your issue but calling your own .focus() from inside a $timeout
Not nice I know, but it may be all you can do until actual support is added
Dave Ackerman
@dmackerman
May 20 2015 15:57
yeah. that does work. mdBottomSheet only looks for these elements:
          var focusable = angular.element(
            element[0].querySelector('button') ||
            element[0].querySelector('a') ||
            element[0].querySelector('[ng-click]')
          );
          focusable.focus();
so if the bottom sheet has no buttons, or links - focus works just fine.
Wills Bithrey
@WillsB3
May 20 2015 15:57
right
Dave Ackerman
@dmackerman
May 20 2015 15:57
going to submit a PR that matches the API for dialogs focusOnOpen
Wills Bithrey
@WillsB3
May 20 2015 15:58
using a timeout (even of 0) you could ensure that your .focus() call will be the last one called (as it were) which might let you use whatever content/stuff you want inside the bottom sheet.
PR sounds like a great idea :)
Dave Ackerman
@dmackerman
May 20 2015 16:15
angular/material#2929
:)
Wills Bithrey
@WillsB3
May 20 2015 16:20
@dmackerman Nice :D
Marcy Sutton
@marcysutton
May 20 2015 18:22
@dmackerman you might also look at the md-sidenav-focus directive
borodaalex
@borodaalex
May 20 2015 20:12
This is how I've found workaround for the my question above:
Firstly, set escapeToClose of dialog to false and before calling show method on a md-dialog I've added keydown event handler on body.
Secondly, in this event handler I check whether pressed key is esc and whether we are inside auto-complete element.
In total, workaround works as expected: if we press esc button inside auto-complete element dialog is not closed, but
esc processed by auto-complete element as planned by base auto-complete logic.
$scope.newDialog = function(event, data) {
$('body').on('keydown', onModalKeydown);
$mdDialog.show({
clickOutsideToClose: true,
escapeToClose : false,
controller: 'ctrl',
template: ....,
})
};
        function onModalKeydown(event){
            var key = event.which || event.keyCode;
            // if pressed button is not esc or focus is on autocomplete control just return;
            // this way we will pass logic to manage key event handling further to corresponding conrols
            // (in case of esc btn to autocomplete control and not closing dialog)
            if (key !== 27 || checkFocus()) return;
            $mdDialog.hide();
            $('body').off('keydown', onModalKeydown);
        }

        function checkFocus(){
            var focused = $(document.activeElement);
            if(focused.attr('type') === 'search') {
                return true;
            }
            return false;
        }
Wills Bithrey
@WillsB3
May 20 2015 20:43
@borodaalex I guess what needs to happen is the autocomplete component needs to stop the esc key event propagating if the event was handled by the autocomplete... Did you create an issue on GitHub for this? seems like this should be handled within ngMaterial (if it isn't already as you seem to have found).
borodaalex
@borodaalex
May 20 2015 20:55
@WillsB3, no, I did not create an issue) Today is my first day I've played with angular/material, so I did not think it was an issue, just not implemented functionality
borodaalex
@borodaalex
May 20 2015 21:13
@WillsB3 , created issue angular/material#2931
Wills Bithrey
@WillsB3
May 20 2015 21:49
:+1: