Tooltip hides when child element gains focus

[adimehta]

Because of the tabindex attribute of core-tooltip, activating a control using keyboard requires an extra TAB key press. Pressing ENTER to activate the control when tooltip is visible does nothing as the focus is with tooltip. Pressing another TAB at this point, hides the tooltip and takes the focus to actual control. So, pressing ENTER activates the control now.

Removing the tabindex attribute from core-tooltip and adding listeners for focus and blur events in capture mode, to show/hide the tooltip solves this focus issue. With this, there is also a need to override disabledChanged method of core-focusable so that it doesn't add tabindex attribute to it.

The handlers for the events would look like this:

  onBlur: function(e) {
    this.classList.remove('core-tooltip-focused');
  },

  onFocus: function(e) {
    if (!this.pressed) {
      this.classList.add('core-tooltip-focused');
    }
  }

Css class core-tooltip-focused can then set the visibility of the tooltip.