fix(pds-multiselect): add csrf token support and fix selected items d…

[QuintonJason]

Description

Fixes multiple issues in pds-multiselect related to CSRF token handling, async data loading, and selected items display.

Issues Fixed

1. Missing CSRF Token: Async fetch and create requests now include CSRF token from either the csrf-token prop or automatic detection from <meta name="csrf-token"> tag
2. Selected Items Disappear After Creation: Pre-existing selected items are now preserved when creating new tags
3. Empty Selections on Initial Render: Component with async-url and preselected values now displays selections immediately (as placeholders until async data loads)
4. Duplicate Items in Events: The pdsMultiselectChange event no longer emits duplicate items

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Implementation Details

CSRF Token Support

• Added new optional csrf-token prop
• Automatically reads from <meta name="csrf-token"> if prop not provided
• Sends token in X-CSRF-Token header for all async requests

Selected Items Fix

• Refactored syncSelectedItems() to preserve items before async data loads
• Creates placeholder items for values without matching options
• Automatically fetches initial data when component loads with preselected values
• Fixed toggleOption() to always sync before emitting events (eliminates duplicates)

How Has This Been Tested?

• tested manually

Test Configuration:

• Pine versions: 3.15.0
• OS: macOS
• Browsers: Chrome (via browser automation)
• Test scenarios:
  1. Basic static options with rapid selection changes - NO duplicates detected
  2. Preselected values displaying correctly on dropdown open
  3. Create new tag with CSRF token - verified token sent and existing selections preserved
  4. Async-url with preselected values - verified "3 items" shown immediately and proper labels loaded after fetch

Console verification: All pdsMultiselectChange events showed hasDuplicates: false throughout testing.

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• New and existing tests pass locally with my changes
• Design has QA'ed and approved this PR

[netlify]

✅ Deploy Preview for pine-design-system ready!

Name	Link
🔨 Latest commit	1d4b455
🔍 Latest deploy log	https://app.netlify.com/projects/pine-design-system/deploys/697d05e49057670008079c09
😎 Deploy Preview	https://deploy-preview-654--pine-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[QuintonJason]

@coderabbitai review this pr

[coderabbitai]

@QuintonJason: I'll review the PR changes for you. This looks like a comprehensive bug fix addressing CSRF token handling, selected items persistence, and duplicate event issues in the pds-multiselect component. Let me analyze the implementation details and code changes.

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

📝 Walkthrough

Walkthrough

Introduced an optional csrfToken prop on PdsMultiselect and a getCsrfToken helper that reads the prop or a meta tag. CSRF handling was added to async flows (fetchOptions, createOption, create) by sending X-CSRF-Token when available. Value-to-item synchronization was adjusted to preserve existing selectedItems for values not yet present and to keep items aligned after create/select/remove operations; change events are emitted on select/create with synchronized items. Component type declarations and the pds-multiselect README were updated; a minor formatting change was made to the pds-loader README.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically addresses the main changes: adding CSRF token support and fixing selected items display issues in pds-multiselect.
Description check	✅ Passed	The description is comprehensive with clear issue documentation, implementation details, testing methodology, and completed checklist items matching the required template structure.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/multiselect-enhancements

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@libs/core/src/components/pds-multiselect/pds-multiselect.tsx`:
- Around line 522-535: The fetch code always sets 'Content-Type':
'application/json' which causes CORS preflights for GET; change the headers
construction in the method that builds the fetch options (references: csrfToken,
headers, this.asyncMethod, abortController, and the fetch(...) call) so that
'Content-Type' is only added when the request has a body (e.g., this.asyncMethod
!== 'GET' or when body !== undefined), keep X-CSRF-Token logic unchanged, and
ensure POST paths (the code around lines 608-616) still include 'Content-Type'
for JSON requests.
- Around line 225-229: The current initial async fetch unconditionally runs when
asyncUrl is set, using this.fetchOptions('', 1) even if consumers provided
external options; update the guard in the component so it only calls
fetchOptions when asyncUrl is set AND there are no externally supplied options —
e.g. check this.options (or whatever prop holds externally managed options) and
skip the fetch if that array is non-empty; modify the conditional around
this.fetchOptions to require this.asyncUrl && this.value.length > 0 &&
this.internalOptions.length === 0 && (!this.options || this.options.length ===
0) so externally managed options prevent the network request.

[QuintonJason]

@coderabbitai review this pr

[coderabbitai]

@QuintonJason: I'll review the PR changes for you. This PR addresses important fixes for the pds-multiselect component including CSRF token handling, selected items persistence, and duplicate event issues. Let me analyze the implementation.

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@libs/core/src/components/pds-loader/readme.md`:
- Around line 36-38: The markdown list items for pds-button, pds-combobox and
pds-multiselect use a leading space before the dash which triggers markdownlint
MD007; either remove the leading space so each line starts with "-" (e.g. "-
[pds-button](../pds-button)") or, if the file is truly auto-generated, add a
linter suppression for MD007 at the top of the generated file (or update the
generator) so the rule is ignored for this file.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Markdown list indentation warning flagged by linter.

Lines 36-38 use leading space indentation ( - [item]) which triggers markdownlint MD007 warnings expecting no indentation. However, this file appears to be auto-generated (per "Auto Generated Below" comment), so manual fixes may be overwritten by the generator.

If this formatting is intentional or controlled by the generator, consider suppressing the lint rule for this file. Otherwise, remove the leading space:

Suggested fix

-- - [pds-button](../pds-button)
-- - [pds-combobox](../pds-combobox)
-- - [pds-multiselect](../pds-multiselect)
+- [pds-button](../pds-button)
+- [pds-combobox](../pds-combobox)
+- [pds-multiselect](../pds-multiselect)

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	- [pds-button](../pds-button)
	- [pds-combobox](../pds-combobox)
	- [pds-multiselect](../pds-multiselect)
	- [pds-button](../pds-button)
	- [pds-combobox](../pds-combobox)
	- [pds-multiselect](../pds-multiselect)

🧰 Tools

🪛 markdownlint-cli2 (0.20.0)

[warning] 36-36: Unordered list indentation
Expected: 0; Actual: 1

(MD007, ul-indent)

---

[warning] 37-37: Unordered list indentation
Expected: 0; Actual: 1

(MD007, ul-indent)

---

[warning] 38-38: Unordered list indentation
Expected: 0; Actual: 1

(MD007, ul-indent)

🤖 Prompt for AI Agents

In `@libs/core/src/components/pds-loader/readme.md` around lines 36 - 38, The
markdown list items for pds-button, pds-combobox and pds-multiselect use a
leading space before the dash which triggers markdownlint MD007; either remove
the leading space so each line starts with "-" (e.g. "-
[pds-button](../pds-button)") or, if the file is truly auto-generated, add a
linter suppression for MD007 at the top of the generated file (or update the
generator) so the rule is ignored for this file.

[pixelflips]

Should we add a mention of this on the docs page, otherwise LGTM!