Refactor disabled getter (remove ember/runloop & fix no-side-effects) (#1064)

* Refactor disabled getter (remove ember/runloop & fix no-side-effects)

* Fix lint

* Fix lint

* Add note to migrate

* Remove unwanted change

Author: mkszepp

docs/app/templates/public-pages/docs/migrate-8-0-to-9-0.gts

@@ -77,6 +77,18 @@ import { LinkTo } from '@ember/routing';
         a regular HTML attribute instead.
       </p>
     </li>
+    <li>
+      <p>
+        If you are using the public API without the trigger modifier and change
+        <code>@disabled</code>
+        from
+        <code>false</code>
+        to
+        <code>true</code>, please follow the guidance
+        <a href="https://github.com/cibernox/ember-basic-dropdown/pull/1064">in
+          this PR</a>
+      </p>
+    </li>
     <li>
       <p>
         If you are using

src/components/basic-dropdown-content.gts

@@ -175,7 +175,7 @@ export default class BasicDropdownContent<
       if (!triggerElement) {
         triggerElement = document.querySelector(selector) as HTMLElement;
       }
-      this.handleRootMouseDown = (e: MouseEvent | TouchEvent) => {
+      this.handleRootMouseDown = (e: MouseEvent | TouchEvent): void => {
         const target = (e.composedPath?.()[0] || e.target) as Element;
         if (target === null) return;
         if (

src/components/basic-dropdown.gts

@@ -3,7 +3,6 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import calculatePosition from '../utils/calculate-position.ts';
-import { schedule } from '@ember/runloop';
 import { hash } from '@ember/helper';
 import BasicDropdownTrigger from './basic-dropdown-trigger.gts';
 import BasicDropdownContent from './basic-dropdown-content.gts';
@@ -27,7 +26,6 @@ import type {
   TRootEventType,
 } from '../types.ts';
 
-const UNINITIALIZED = {};
 const IGNORED_STYLES = ['top', 'left', 'right', 'width', 'height'];
 
 export interface BasicDropdownDefaultBlock<
@@ -122,35 +120,44 @@ export default class BasicDropdown<
   @tracked width: string | undefined;
   @tracked height: string | undefined;
   @tracked otherStyles: Record<string, string | number | undefined> = {};
-  @tracked isOpen = this.args.initiallyOpened || false;
   @tracked renderInPlace =
     this.args.renderInPlace !== undefined ? this.args.renderInPlace : false;
+  @tracked private _isOpen = this.args.initiallyOpened || false;
+
   private previousVerticalPosition?: VerticalPosition | undefined;
   private previousHorizontalPosition?: HorizontalPosition | undefined;
   private triggerElement: HTMLElement | null = null;
   private dropdownElement: HTMLElement | null = null;
 
   private _uid = guidFor(this);
   private _dropdownId: string = `ember-basic-dropdown-content-${this._uid}`;
-  private _previousDisabled = UNINITIALIZED;
   private _actions: DropdownActions = {
     open: this.open.bind(this),
     close: this.close.bind(this),
     toggle: this.toggle.bind(this),
     reposition: this.reposition.bind(this),
+    updatePublicApi: this.updatePublicApi.bind(this),
     registerTriggerElement: this.registerTriggerElement.bind(this),
     registerDropdownElement: this.registerDropdownElement.bind(this),
     getTriggerElement: () => this.triggerElement,
   };
 
-  private get horizontalPosition() {
+  private get horizontalPosition(): HorizontalPosition {
     return this.args.horizontalPosition || 'auto'; // auto-right | right | center | left
   }
 
-  private get verticalPosition() {
+  private get verticalPosition(): VerticalPosition {
     return this.args.verticalPosition || 'auto'; // above | below
   }
 
+  get isOpen(): boolean {
+    return !this.disabled && this._isOpen;
+  }
+
+  set isOpen(v: boolean) {
+    this._isOpen = v;
+  }
+
   get destination(): string {
     return this.args.destination || this._getDestinationId();
   }
@@ -179,25 +186,7 @@ export default class BasicDropdown<
   }
 
   get disabled(): boolean {
-    const newVal = this.args.disabled || false;
-    if (
-      this._previousDisabled !== UNINITIALIZED &&
-      this._previousDisabled !== newVal
-    ) {
-      // eslint-disable-next-line ember/no-runloop
-      schedule('actions', () => {
-        if (newVal && this.publicAPI.isOpen) {
-          // eslint-disable-next-line ember/no-side-effects
-          this.isOpen = false;
-        }
-        if (this.args.registerAPI) {
-          this.args.registerAPI(this.publicAPI);
-        }
-      });
-    }
-    // eslint-disable-next-line ember/no-side-effects
-    this._previousDisabled = newVal;
-    return newVal;
+    return this.args.disabled || false;
   }
 
   get publicAPI(): Dropdown {
@@ -337,6 +326,15 @@ export default class BasicDropdown<
     return this.applyReposition(triggerElement, dropdownElement, positionData);
   }
 
+  @action
+  updatePublicApi() {
+    if (!this.args.registerAPI) {
+      return;
+    }
+
+    this.args.registerAPI(this.publicAPI);
+  }
+
   @action
   registerTriggerElement(element: HTMLElement): void {
     this.triggerElement = element;

src/modifiers/basic-dropdown-trigger.ts

@@ -32,6 +32,8 @@ export default class DropdownTriggerModifier extends Modifier<Signature> {
   desiredEventType!: string;
   stopPropagation: boolean | undefined;
 
+  private _previousDisabled: boolean | undefined = undefined;
+
   constructor(owner: Owner, args: ArgsFor<Signature>) {
     super(owner, args);
     registerDestructor(this, cleanup);
@@ -51,6 +53,17 @@ export default class DropdownTriggerModifier extends Modifier<Signature> {
       this.setup(element);
       this.didSetup = true;
     }
+
+    if (this._previousDisabled === undefined) {
+      this._previousDisabled = this.dropdown.disabled;
+    }
+
+    if (this.dropdown.disabled !== this._previousDisabled) {
+      this._previousDisabled = this.dropdown.disabled;
+
+      this.dropdown.actions.updatePublicApi();
+    }
+
     this.update(element, positional, named);
   }
 

src/types.ts

@@ -3,6 +3,7 @@ export interface DropdownActions {
   close: (e?: Event, skipFocus?: boolean) => void;
   open: (e?: Event) => void;
   reposition: () => undefined | RepositionChanges;
+  updatePublicApi: () => void;
   registerTriggerElement: (e: HTMLElement) => void;
   registerDropdownElement: (e: HTMLElement) => void;
   getTriggerElement: () => HTMLElement | null;