initial commit

skills/self-hosting/shop-pro-quote/references/pocketbase-auto-cancellation.md

@@ -0,0 +1,60 @@
+# PocketBase SDK Auto-Cancellation
+
+## The Problem
+
+PocketBase JS SDK enables **auto-cancellation by default**. Every `create()` and `update()` call to the same collection shares a default `requestKey` derived from method + URL. When two calls to the same collection happen simultaneously (double-click, race condition, rapid re-submission), the second call **auto-cancels the first** and throws:
+
+```
+Error: The request was autocancelled.
+```
+
+This is surfaced to the user as "Error creating repair order: The request was autocancelled."
+
+## The Fix
+
+Pass `{ requestKey: null }` to ALL mutating PocketBase calls in `pocketbase.js`:
+
+```js
+// addDoc
+const record = await pb.collection(collName).create(pbData, { requestKey: null });
+
+// updateDoc
+const record = await pb.collection(collName).update(docId, pbData, { requestKey: null });
+
+// setDoc (both branches)
+return pb.collection(collName).update(records[0].id, pbData, { requestKey: null });
+return pb.collection(collName).create(pbData, { requestKey: null });
+```
+
+The `getDocs` and `getFullListLegacy` functions already pass `{ requestKey: null }` in their options.
+
+## Belt-and-Suspenders: Double-Submission Guard
+
+Even with `requestKey: null`, prevent duplicate form submissions by disabling the submit button on first click:
+
+```js
+function handleFormSubmit() {
+    const submitBtn = document.getElementById('submit-btn');
+    if (submitBtn && submitBtn.disabled) return;  // guard
+    if (submitBtn) {
+        submitBtn.disabled = true;
+        submitBtn.textContent = 'Saving...';
+    }
+    // ... submission logic ...
+    // Re-enable after success:
+    if (submitBtn) {
+        submitBtn.disabled = false;
+        submitBtn.textContent = 'Create Repair Order';
+    }
+    // ... success cleanup (clear form, collapse section) ...
+} catch (error) {
+    // Re-enable in catch block:
+    if (submitBtn) {
+        submitBtn.disabled = false;
+        submitBtn.textContent = 'Create Repair Order';
+    }
+    // ... error handling ...
+}
+```
+
+This guards against: double-clicks, keyboard double-Enter, and accidental double-taps on mobile.