Tooltips on dynamically disabled / hidden elements stay in U


Topic: Tooltips on dynamically disabled / hidden elements stay in UI forever

ECKD GmbH pro premium priority asked 2 years ago

Expected behavior

Tooltips disappear, when an element is disabled / hidden dynamically and don't stay in the UI forever.

Actual behavior

When an element is disabled dynamically, the tooltip will stay in the UI forever.Some common use case would be disabling a "save"-button when clicked while the saving process is running.

There are a lot more common use cases we're running into, and I know there are some workarounds like putting the tooltip on an outer container for cases where something could be disabled at some point, but I think there could be more elegant solutions that work consistently, doesn't need case to case decisions in the application, and would make the tooltips more stable.

Repro

    <button type="button" class="btn" mdbTooltip="Tooltip not disappearing after click" placement="top"
            (click)="onBtnClicked()" [disabled]="isDisabled">
            Disable button on click
    </button>

    @Component({
      templateUrl: './repro.component.html',
    })
    export class ReproComponent {
      public isDisabled = false;
      public onBtnClicked(): void {
        this.isDisabled = true;
      }
    }

Suggestion

Additional to the events that trigger closing (mouseleave, focusout, and so on), that are not triggered on disabled elements anymore, you could watch attribute / class changes to the element, to close the tooltip when the element gets disabled or hidden. I think in this cases the tooltip should always be hidden, the following could be added into the already existing workflow. Of course there are also other solutions to this that would also make the tooltip more stable, but I think this works quite well.

const disabledHiddenObserver = new MutationObserver(mutations => {
      if (!this._open) {
        return;
      }

      if (
        this._open &&
        (this._elementRef.nativeElement.classList.contains('disabled') || this._elementRef.nativeElement.disabled || this._elementRef.nativeElement.hidden)
      ) {
        this.hide();
      }
    });

    disabledHiddenObserver.observe(this._elementRef.nativeElement, { attributes: true });

Arkadiusz Idzikowski staff answered 2 years ago

Tooltips should not be added to the disabled elements because it is impossible to handle events of such elements (and we need access to the events to correctly handle all the options).

We recommend adding our directive to the parent element as suggested in the documentation. If you don't want to create an additional container element in this case, you can get access to the mdbTooltip methods and try to manually hide the tooltip when you disable the button. We explained how to do that in the API section:

https://mdbootstrap.com/docs/angular/components/tooltips/#docsTabsAPI


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 4.0.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No