Deploy commit

docs/iframe.html

@@ -348,8 +348,8 @@
             window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":"tag"};</script><script type="module">import './sb-preview/runtime.js';
 
 
-      import './runtime~main.93042332.iframe.bundle.js';
+      import './runtime~main.45d5f274.iframe.bundle.js';
 
       import './659.2268d502.iframe.bundle.js';
 
-      import './main.f5f7cfac.iframe.bundle.js';</script></body></html>
+      import './main.6304f5eb.iframe.bundle.js';</script></body></html>

docs/project.json

@@ -1 +1 @@
-{"generatedAt":1731233803366,"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"packageManager":{"type":"yarn","version":"1.22.19"},"framework":{"name":"@storybook/react-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/react","storybookVersion":"7.0.18","storybookVersionSpecifier":"7.0.18","language":"typescript","storybookPackages":{"@storybook/blocks":{"version":"7.0.18"},"@storybook/react":{"version":"7.0.18"},"@storybook/react-webpack5":{"version":"7.0.18"},"@storybook/testing-library":{"version":"0.0.14-next.2"},"eslint-plugin-storybook":{"version":"0.6.12"},"storybook":{"version":"7.0.18"}},"addons":{"@storybook/addon-links":{"version":"7.0.18"},"@storybook/addon-essentials":{"version":"7.0.18"},"@storybook/addon-interactions":{"version":"7.0.18"}}}
+{"generatedAt":1731236694949,"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"packageManager":{"type":"yarn","version":"1.22.19"},"framework":{"name":"@storybook/react-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/react","storybookVersion":"7.0.18","storybookVersionSpecifier":"7.0.18","language":"typescript","storybookPackages":{"@storybook/blocks":{"version":"7.0.18"},"@storybook/react":{"version":"7.0.18"},"@storybook/react-webpack5":{"version":"7.0.18"},"@storybook/testing-library":{"version":"0.0.14-next.2"},"eslint-plugin-storybook":{"version":"0.6.12"},"storybook":{"version":"7.0.18"}},"addons":{"@storybook/addon-links":{"version":"7.0.18"},"@storybook/addon-essentials":{"version":"7.0.18"},"@storybook/addon-interactions":{"version":"7.0.18"}}}

package.json

@@ -13,7 +13,8 @@
   "main": "build/index.js",
   "style": "build/dist/guestbell-forms.min.css",
   "dependencies": {
-    "classnames": "^2.2.6"
+    "classnames": "^2.2.6",
+    "lodash.debounce": "^4.0.8"
   },
   "devDependencies": {
     "@babel/cli": "7.21.5",

src/lib/components/tags/Tags.tsx

@@ -21,6 +21,7 @@ import { withThemeContext } from '../themeProvider/withThemeContext';
 import { PopperProps } from '@mui/material/Popper/Popper';
 import LinearProgress from '@mui/material/LinearProgress';
 import Portal from '@mui/material/Portal';
+import debounce from 'lodash.debounce';
 
 // Misc
 export type Tag<T extends number | string = number> = {
@@ -53,6 +54,10 @@ export type TagsProps<
   getTagId?: (tag: T) => IdT;
   existingTags?: T[];
   fetchExistingTags?: (text: string, tags: T[]) => Promise<T[]>;
+  fetchExistingTagsDebounceMs?: number;
+  fetchExistingTagsDebounceMaxMs?: number;
+  fetchExistingTagsDebounceLeading?: boolean;
+  fetchExistingTagsDebounceTrailing?: boolean;
   onTagsChanged: (newTags: T[]) => void;
   onNewTagAdded?: (newTagName: string) => Promise<T>;
   onTagClick?: (tag: T) => void;
@@ -144,6 +149,10 @@ export class TagsRaw<
     closeSuggestionsAfterCreate: false,
     getName: (tag) => tag.name,
     showTags: true,
+    fetchExistingTagsDebounceMs: 500,
+    fetchExistingTagsDebounceMaxMs: Number.MAX_SAFE_INTEGER,
+    fetchExistingTagsDebounceLeading: true,
+    fetchExistingTagsDebounceTrailing: true,
   };
 
   private textRef: React.RefObject<TextRaw>;
@@ -165,6 +174,15 @@ export class TagsRaw<
     this.suggestionsRef = React.createRef();
     this.handleClickOutside = this.handleClickOutside.bind(this);
     this.handleLeaveMobileClick = this.handleLeaveMobileClick.bind(this);
+    this.fetchExistingTags = debounce(
+      this.fetchExistingTags,
+      props.fetchExistingTagsDebounceMs,
+      {
+        maxWait: props.fetchExistingTagsDebounceMaxMs,
+        leading: props.fetchExistingTagsDebounceLeading,
+        trailing: props.fetchExistingTagsDebounceTrailing,
+      }
+    );
     if (props.mobileVersionEnabled) {
       this.isMobile = require('react-device-detect')?.isMobile;
     }