CODEWITHSUNDEEP
javascriptangularjsautocompletedatepickerangular-material
Elad Hirsch
Elad Hirsch

Reputation: 294

angular material (datepicker) focus is on body after any keyboard based operation

its seems that every operation with the date-picker don't return the focus back to the date picker input or button and as a result the tab indexing is back to the first element.

you can take example with the official demo : https://material.angularjs.org/latest/demo/datepicker

looking at the sources and debugging - its seems that focus operation is triggered on the relevant element but even so - the focus changed to to the document body.

 /** Close the floating calendar pane. */
  DatePickerCtrl.prototype.closeCalendarPane = function() {
    if (this.isCalendarOpen) {
      var self = this;

      self.calendarPaneOpenedFrom.focus();
      self.calendarPaneOpenedFrom = null;

      if (self.openOnFocus) {
        // Ensures that all focus events have fired before detaching
        // the calendar. Prevents the calendar from reopening immediately
        // in IE when md-open-on-focus is set. Also it needs to trigger
        // a digest, in order to prevent issues where the calendar wasn't
        // showing up on the next open.
        this.$mdUtil.nextTick(detach);
      } else {
        detach();
      }
    }

    function detach() {
      self.detachCalendarPane();
      self.isCalendarOpen = false;
      self.ngModelCtrl.$setTouched();

      self.documentElement.off('click touchstart', self.bodyClickHandler);
      window.removeEventListener('resize', self.windowResizeHandler);
    }
  };

10x elad.

Upvotes: 4

Views: 1879

Answers (1)

Elad Hirsch
Elad Hirsch

Reputation: 294

There was a bug in the datepicker focus issue caused because the SVG element inside didn't propagate the focus event.

solved by crisbeto.

ref : https://github.com/crisbeto/material/commit/e8d4ad217dd2ad5a8e8875f9bdc1269679667e3b

Upvotes: 0

Related Questions