Disable 'Select Element' button while element picker is active (#137)

Author: karngyan

src/managers/preview-bar-manager.test.ts

@@ -191,6 +191,73 @@ describe('preview-bar-manager', () => {
     });
   });
 
+  describe('element picker button disabled state', () => {
+    function getSelectBtn(): HTMLButtonElement {
+      return document.querySelector<HTMLButtonElement>(
+        '#gist-preview-bar .gist-pb-select-elem-btn'
+      )!;
+    }
+
+    function getPickerOverlay(): HTMLElement | null {
+      return document.querySelector<HTMLElement>('.gist-pb-picker-overlay');
+    }
+
+    it('select element button is not disabled initially', () => {
+      initBarWithMessage([], 'inline');
+      expect(getSelectBtn().disabled).toBe(false);
+    });
+
+    it('disables the button when element picker is activated', () => {
+      initBarWithMessage([], 'inline');
+      const btn = getSelectBtn();
+      btn.click();
+      expect(btn.disabled).toBe(true);
+      expect(getPickerOverlay()).not.toBeNull();
+    });
+
+    it('re-enables the button after picker is cancelled with Escape', () => {
+      initBarWithMessage([], 'inline');
+      getSelectBtn().click();
+      expect(getSelectBtn().disabled).toBe(true);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+
+      expect(getPickerOverlay()).toBeNull();
+      expect(getSelectBtn().disabled).toBe(false);
+    });
+
+    it('re-enables the button after an element is picked', () => {
+      // Add a target element for the picker to find
+      const target = document.createElement('div');
+      target.id = 'pick-target';
+      document.body.appendChild(target);
+
+      // Stub CSS.escape since jsdom doesn't support it
+      const globalCSS = globalThis as unknown as Record<string, unknown>;
+      const origCSS = globalCSS.CSS;
+      globalCSS.CSS = { escape: (v: string) => v };
+
+      initBarWithMessage([], 'inline');
+      getSelectBtn().click();
+      expect(getSelectBtn().disabled).toBe(true);
+
+      const overlay = getPickerOverlay()!;
+      // Simulate clicking on the overlay — elementFromPoint will return the target
+      const origElementFromPoint = document.elementFromPoint;
+      document.elementFromPoint = vi.fn(
+        () => target
+      ) as unknown as typeof document.elementFromPoint;
+
+      overlay.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+      document.elementFromPoint = origElementFromPoint;
+      globalCSS.CSS = origCSS;
+
+      expect(getPickerOverlay()).toBeNull();
+      expect(getSelectBtn().disabled).toBe(false);
+    });
+  });
+
   describe('updatePreviewBarStep', () => {
     it('updates the bar when step changes', () => {
       const steps: StepDisplayConfig[] = [

src/managers/preview-bar-manager.ts

@@ -267,6 +267,7 @@ function buildElementSelectorControl(settings: DisplaySettings, row: HTMLElement
     className: 'gist-pb-select-elem-btn',
     textContent: 'Select Element',
   });
+  if (pickerActive) selectBtn.disabled = true;
   selectBtn.addEventListener('click', () => startElementPicker(selectorInput));
 
   const inputRow = el('div', { className: 'gist-pb-inline-row' });
@@ -441,6 +442,12 @@ function startElementPicker(target: HTMLInputElement) {
   if (pickerActive) return;
   pickerActive = true;
 
+  // Disable the "Select Element" button while picker is active
+  const selectElemBtn = document.querySelector<HTMLButtonElement>(
+    `#${BAR_ID} .gist-pb-select-elem-btn`
+  );
+  if (selectElemBtn) selectElemBtn.disabled = true;
+
   const settingsBeforePicker = { ...currentSettings };
   const msg =
     Gist.currentMessages.find((m: GistMessage) => m.instanceId === currentInstanceId) ?? null;
@@ -523,6 +530,7 @@ function startElementPicker(target: HTMLInputElement) {
       }
     }
     cleanup();
+    renderBar();
   };
 
   const cleanup = () => {

src/managers/preview-bar-styles.ts

@@ -108,6 +108,9 @@ export const PREVIEW_BAR_CSS = `
     min-width: auto; box-sizing: border-box;
     -webkit-appearance: none; appearance: none;
   }
+  .gist-pb-select-elem-btn:disabled {
+    opacity: 0.4; cursor: not-allowed;
+  }
   .gist-pb-spacer { flex: 1; min-width: 0; }
   .gist-pb-save-btn {
     height: 36px; padding: 0 18px;