@tunghtml/strapi-plugin-composite-field 1.1.4 → 1.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/_chunks/{CompositeInput-DJdUl_gs.js → CompositeInput-BhDBr5rx.js} +27 -23
  2. package/dist/_chunks/{CompositeInput-BWK_SH2_.mjs → CompositeInput-DLjmxeUG.mjs} +27 -23
  3. package/dist/admin/index.js +1 -1
  4. package/dist/admin/index.mjs +1 -1
  5. package/package.json +1 -1
package/dist/_chunks/{CompositeInput-DJdUl_gs.js → CompositeInput-BhDBr5rx.js} RENAMED
@@ -483,27 +483,13 @@ const CompositeInput = (props) => {
483
483
  }
484
484
  }
485
485
  if (!fieldValue) {
486
- const allComboboxes = document.querySelectorAll(
487
- 'button[role="combobox"]'
486
+ const combobox = document.querySelector(
487
+ `div[role="combobox"][name="${fieldPath}"]`
488
488
  );
489
- for (const combobox of allComboboxes) {
490
- const fieldContainer = combobox.closest("[data-strapi-field]") || combobox.closest('div[class*="Field"]');
491
- if (fieldContainer) {
492
- const label2 = fieldContainer.querySelector("label");
493
- const hiddenInput = fieldContainer.querySelector(
494
- `input[name="${fieldPath}"]`
495
- );
496
- if (label2 || hiddenInput) {
497
- const labelText = label2?.textContent?.trim().toLowerCase() || "";
498
- const fieldName = fieldPath.toLowerCase();
499
- if (labelText === fieldName || labelText.replace(/\s+/g, "").includes(fieldName.replace(/\s+/g, "")) || hiddenInput) {
500
- const selectedText = combobox.textContent?.trim();
501
- if (selectedText && selectedText !== "Select..." && selectedText !== "") {
502
- fieldValue = selectedText;
503
- break;
504
- }
505
- }
506
- }
489
+ if (combobox) {
490
+ const selectedText = combobox.textContent?.trim();
491
+ if (selectedText && selectedText !== "Select..." && selectedText !== "") {
492
+ fieldValue = selectedText;
507
493
  }
508
494
  }
509
495
  }
@@ -530,29 +516,47 @@ const CompositeInput = (props) => {
530
516
  }, [fields, separator, onChange, name]);
531
517
  React__namespace.default.useEffect(() => {
532
518
  if (!autoGenerate || fields.length === 0) return;
519
+ let debounceTimer;
533
520
  const handleFieldChange = () => {
534
- setTimeout(() => {
521
+ clearTimeout(debounceTimer);
522
+ debounceTimer = setTimeout(() => {
535
523
  handleGenerate();
536
524
  }, 300);
537
525
  };
538
526
  const listeners = [];
527
+ const observers = [];
539
528
  fields.forEach((fieldPath) => {
540
529
  const elements = document.querySelectorAll(
541
- `input[name="${fieldPath}"], textarea[name="${fieldPath}"], select[name="${fieldPath}"], button[role="combobox"]`
530
+ `input[name="${fieldPath}"], textarea[name="${fieldPath}"], select[name="${fieldPath}"]`
542
531
  );
543
532
  elements.forEach((element) => {
544
533
  element.addEventListener("change", handleFieldChange);
545
534
  element.addEventListener("input", handleFieldChange);
546
- element.addEventListener("click", handleFieldChange);
547
535
  listeners.push({ element, handler: handleFieldChange });
548
536
  });
537
+ const combobox = document.querySelector(
538
+ `div[role="combobox"][name="${fieldPath}"]`
539
+ );
540
+ if (combobox) {
541
+ const observer = new MutationObserver(handleFieldChange);
542
+ observer.observe(combobox, {
543
+ childList: true,
544
+ subtree: true,
545
+ characterData: true
546
+ });
547
+ observers.push(observer);
548
+ combobox.addEventListener("click", handleFieldChange);
549
+ listeners.push({ element: combobox, handler: handleFieldChange });
550
+ }
549
551
  });
550
552
  return () => {
553
+ clearTimeout(debounceTimer);
551
554
  listeners.forEach(({ element, handler }) => {
552
555
  element.removeEventListener("change", handler);
553
556
  element.removeEventListener("input", handler);
554
557
  element.removeEventListener("click", handler);
555
558
  });
559
+ observers.forEach((observer) => observer.disconnect());
556
560
  };
557
561
  }, [autoGenerate, fields, handleGenerate]);
558
562
  return /* @__PURE__ */ jsxRuntime.jsx(
package/dist/_chunks/{CompositeInput-BWK_SH2_.mjs → CompositeInput-DLjmxeUG.mjs} RENAMED
@@ -464,27 +464,13 @@ const CompositeInput = (props) => {
464
464
  }
465
465
  }
466
466
  if (!fieldValue) {
467
- const allComboboxes = document.querySelectorAll(
468
- 'button[role="combobox"]'
467
+ const combobox = document.querySelector(
468
+ `div[role="combobox"][name="${fieldPath}"]`
469
469
  );
470
- for (const combobox of allComboboxes) {
471
- const fieldContainer = combobox.closest("[data-strapi-field]") || combobox.closest('div[class*="Field"]');
472
- if (fieldContainer) {
473
- const label2 = fieldContainer.querySelector("label");
474
- const hiddenInput = fieldContainer.querySelector(
475
- `input[name="${fieldPath}"]`
476
- );
477
- if (label2 || hiddenInput) {
478
- const labelText = label2?.textContent?.trim().toLowerCase() || "";
479
- const fieldName = fieldPath.toLowerCase();
480
- if (labelText === fieldName || labelText.replace(/\s+/g, "").includes(fieldName.replace(/\s+/g, "")) || hiddenInput) {
481
- const selectedText = combobox.textContent?.trim();
482
- if (selectedText && selectedText !== "Select..." && selectedText !== "") {
483
- fieldValue = selectedText;
484
- break;
485
- }
486
- }
487
- }
470
+ if (combobox) {
471
+ const selectedText = combobox.textContent?.trim();
472
+ if (selectedText && selectedText !== "Select..." && selectedText !== "") {
473
+ fieldValue = selectedText;
488
474
  }
489
475
  }
490
476
  }
@@ -511,29 +497,47 @@ const CompositeInput = (props) => {
511
497
  }, [fields, separator, onChange, name]);
512
498
  React__default.useEffect(() => {
513
499
  if (!autoGenerate || fields.length === 0) return;
500
+ let debounceTimer;
514
501
  const handleFieldChange = () => {
515
- setTimeout(() => {
502
+ clearTimeout(debounceTimer);
503
+ debounceTimer = setTimeout(() => {
516
504
  handleGenerate();
517
505
  }, 300);
518
506
  };
519
507
  const listeners = [];
508
+ const observers = [];
520
509
  fields.forEach((fieldPath) => {
521
510
  const elements = document.querySelectorAll(
522
- `input[name="${fieldPath}"], textarea[name="${fieldPath}"], select[name="${fieldPath}"], button[role="combobox"]`
511
+ `input[name="${fieldPath}"], textarea[name="${fieldPath}"], select[name="${fieldPath}"]`
523
512
  );
524
513
  elements.forEach((element) => {
525
514
  element.addEventListener("change", handleFieldChange);
526
515
  element.addEventListener("input", handleFieldChange);
527
- element.addEventListener("click", handleFieldChange);
528
516
  listeners.push({ element, handler: handleFieldChange });
529
517
  });
518
+ const combobox = document.querySelector(
519
+ `div[role="combobox"][name="${fieldPath}"]`
520
+ );
521
+ if (combobox) {
522
+ const observer = new MutationObserver(handleFieldChange);
523
+ observer.observe(combobox, {
524
+ childList: true,
525
+ subtree: true,
526
+ characterData: true
527
+ });
528
+ observers.push(observer);
529
+ combobox.addEventListener("click", handleFieldChange);
530
+ listeners.push({ element: combobox, handler: handleFieldChange });
531
+ }
530
532
  });
531
533
  return () => {
534
+ clearTimeout(debounceTimer);
532
535
  listeners.forEach(({ element, handler }) => {
533
536
  element.removeEventListener("change", handler);
534
537
  element.removeEventListener("input", handler);
535
538
  element.removeEventListener("click", handler);
536
539
  });
540
+ observers.forEach((observer) => observer.disconnect());
537
541
  };
538
542
  }, [autoGenerate, fields, handleGenerate]);
539
543
  return /* @__PURE__ */ jsx(
package/dist/admin/index.js CHANGED
@@ -37,7 +37,7 @@ const index = {
37
37
  defaultMessage: "Combine multiple fields into one display value"
38
38
  },
39
39
  components: {
40
- Input: async () => Promise.resolve().then(() => require("../_chunks/CompositeInput-DJdUl_gs.js"))
40
+ Input: async () => Promise.resolve().then(() => require("../_chunks/CompositeInput-BhDBr5rx.js"))
41
41
  },
42
42
  options: {
43
43
  base: [
package/dist/admin/index.mjs CHANGED
@@ -34,7 +34,7 @@ const index = {
34
34
  defaultMessage: "Combine multiple fields into one display value"
35
35
  },
36
36
  components: {
37
- Input: async () => import("../_chunks/CompositeInput-BWK_SH2_.mjs")
37
+ Input: async () => import("../_chunks/CompositeInput-DLjmxeUG.mjs")
38
38
  },
39
39
  options: {
40
40
  base: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tunghtml/strapi-plugin-composite-field",
3
- "version": "1.1.4",
3
+ "version": "1.1.6",
4
4
  "description": "A Strapi v5 plugin to create composite display fields by combining multiple text, string, and enum fields with auto-generate support",
5
5
  "keywords": [
6
6
  "strapi",