Skip to content

fix(pds-multiselect): add csrfHeaderName prop #657

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
QuintonJason merged 5 commits into from
Feb 3, 2026
Merged

fix(pds-multiselect): add csrfHeaderName prop #657

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bb29f04
fix(pds-multiselect): add csrfHeaderName prop
QuintonJason Feb 3, 2026
0fa912a
chore: added auto gen files
QuintonJason Feb 3, 2026
d54d8a7
chore: auto gen files
QuintonJason Feb 3, 2026
93ded5e
chore(release): release 3.15.3-dev.0
kajabi-bot Feb 3, 2026
d75abec
Revert "chore(release): release 3.15.3-dev.0"
QuintonJason Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions libs/core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1399,6 +1399,11 @@ export namespace Components {
* URL endpoint for creating new options. When set, shows "Add" option when no matches found.
*/
"createUrl"?: string;
/**
* CSRF header name for authenticated requests. Defaults to `X-CSRF-Token`.
* @default 'X-CSRF-Token'
*/
"csrfHeaderName"?: string;
/**
* CSRF token for authenticated requests. If not provided, attempts to read from meta tag.
*/
Expand Down Expand Up @@ -4401,6 +4406,11 @@ declare namespace LocalJSX {
* URL endpoint for creating new options. When set, shows "Add" option when no matches found.
*/
"createUrl"?: string;
/**
* CSRF header name for authenticated requests. Defaults to `X-CSRF-Token`.
* @default 'X-CSRF-Token'
*/
"csrfHeaderName"?: string;
/**
* CSRF token for authenticated requests. If not provided, attempts to read from meta tag.
*/
Expand Down
11 changes: 9 additions & 2 deletions libs/core/src/components/pds-multiselect/pds-multiselect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,11 @@ export class PdsMultiselect {
*/
@Prop() csrfToken?: string;

/**
* CSRF header name for authenticated requests. Defaults to `X-CSRF-Token`.
*/
@Prop() csrfHeaderName?: string = 'X-CSRF-Token';

// Internal state
@State() isOpen: boolean = false;
@State() searchQuery: string = '';
Expand Down Expand Up @@ -517,7 +522,8 @@ export class PdsMultiselect {
};

if (csrfToken) {
headers['X-CSRF-Token'] = csrfToken;
const headerName = this.csrfHeaderName || 'X-CSRF-Token';
headers[headerName] = csrfToken;
}

const response = await fetch(url.toString(), {
Expand Down Expand Up @@ -603,7 +609,8 @@ export class PdsMultiselect {
};

if (csrfToken) {
headers['X-CSRF-Token'] = csrfToken;
const headerName = this.csrfHeaderName || 'X-CSRF-Token';
headers[headerName] = csrfToken;
}

const response = await fetch(url.toString(), {
Expand Down
55 changes: 28 additions & 27 deletions libs/core/src/components/pds-multiselect/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,33 +17,34 @@ A multiselect component that allows users to select multiple options from a sear

## Properties

| Property | Attribute | Description | Type | Default |
| -------------------------- | ---------------- | ------------------------------------------------------------------------------------------ | -------------------------------------- | ------------- |
| `asyncMethod` | `async-method` | HTTP method for async requests. | `"GET" \| "POST"` | `'GET'` |
| `asyncUrl` | `async-url` | URL endpoint for async data fetching. | `string` | `undefined` |
| `componentId` _(required)_ | `component-id` | A unique identifier used for the underlying component `id` attribute. | `string` | `undefined` |
| `createUrl` | `create-url` | URL endpoint for creating new options. When set, shows "Add" option when no matches found. | `string` | `undefined` |
| `csrfToken` | `csrf-token` | CSRF token for authenticated requests. If not provided, attempts to read from meta tag. | `string` | `undefined` |
| `debounce` | `debounce` | Debounce delay in milliseconds for search/fetch. | `number` | `300` |
| `disabled` | `disabled` | Determines whether or not the multiselect is disabled. | `boolean` | `false` |
| `errorMessage` | `error-message` | Error message to display. | `string` | `undefined` |
| `fetchTimeout` | `fetch-timeout` | Timeout in milliseconds for async fetch requests. | `number` | `30000` |
| `formatResult` | -- | Function to format async results. Receives raw API response item. | `(item: unknown) => MultiselectOption` | `undefined` |
| `helperMessage` | `helper-message` | Helper message to display below the input. | `string` | `undefined` |
| `hideLabel` | `hide-label` | Visually hides the label but keeps it accessible. | `boolean` | `false` |
| `invalid` | `invalid` | If true, the multiselect is in an invalid state. | `boolean` | `undefined` |
| `label` | `label` | Text to be displayed as the multiselect label. | `string` | `undefined` |
| `loading` | `loading` | Whether the component is currently loading async options. | `boolean` | `false` |
| `maxHeight` | `max-height` | Maximum height of the dropdown before scrolling. | `string` | `'300px'` |
| `maxSelections` | `max-selections` | Maximum number of selections allowed. | `number` | `undefined` |
| `minWidth` | `min-width` | Minimum width of the dropdown panel. | `string` | `'250px'` |
| `name` | `name` | Specifies the name. Submitted with the form as part of a name/value pair. | `string` | `undefined` |
| `options` | -- | Options provided externally (for consumer-managed async). | `MultiselectOption[]` | `undefined` |
| `panelWidth` | `panel-width` | Width of the dropdown panel. Defaults to the trigger width. | `string` | `undefined` |
| `placeholder` | `placeholder` | Placeholder text for the input field. | `string` | `'Select...'` |
| `required` | `required` | If true, the multiselect is required. | `boolean` | `false` |
| `triggerWidth` | `trigger-width` | Width of the trigger button (and reference for dropdown positioning). | `string` | `'100%'` |
| `value` | -- | Array of selected option values. | `string[]` | `[]` |
| Property | Attribute | Description | Type | Default |
| -------------------------- | ------------------ | ------------------------------------------------------------------------------------------ | -------------------------------------- | ---------------- |
| `asyncMethod` | `async-method` | HTTP method for async requests. | `"GET" \| "POST"` | `'GET'` |
| `asyncUrl` | `async-url` | URL endpoint for async data fetching. | `string` | `undefined` |
| `componentId` _(required)_ | `component-id` | A unique identifier used for the underlying component `id` attribute. | `string` | `undefined` |
| `createUrl` | `create-url` | URL endpoint for creating new options. When set, shows "Add" option when no matches found. | `string` | `undefined` |
| `csrfHeaderName` | `csrf-header-name` | CSRF header name for authenticated requests. Defaults to `X-CSRF-Token`. | `string` | `'X-CSRF-Token'` |
| `csrfToken` | `csrf-token` | CSRF token for authenticated requests. If not provided, attempts to read from meta tag. | `string` | `undefined` |
| `debounce` | `debounce` | Debounce delay in milliseconds for search/fetch. | `number` | `300` |
| `disabled` | `disabled` | Determines whether or not the multiselect is disabled. | `boolean` | `false` |
| `errorMessage` | `error-message` | Error message to display. | `string` | `undefined` |
| `fetchTimeout` | `fetch-timeout` | Timeout in milliseconds for async fetch requests. | `number` | `30000` |
| `formatResult` | -- | Function to format async results. Receives raw API response item. | `(item: unknown) => MultiselectOption` | `undefined` |
| `helperMessage` | `helper-message` | Helper message to display below the input. | `string` | `undefined` |
| `hideLabel` | `hide-label` | Visually hides the label but keeps it accessible. | `boolean` | `false` |
| `invalid` | `invalid` | If true, the multiselect is in an invalid state. | `boolean` | `undefined` |
| `label` | `label` | Text to be displayed as the multiselect label. | `string` | `undefined` |
| `loading` | `loading` | Whether the component is currently loading async options. | `boolean` | `false` |
| `maxHeight` | `max-height` | Maximum height of the dropdown before scrolling. | `string` | `'300px'` |
| `maxSelections` | `max-selections` | Maximum number of selections allowed. | `number` | `undefined` |
| `minWidth` | `min-width` | Minimum width of the dropdown panel. | `string` | `'250px'` |
| `name` | `name` | Specifies the name. Submitted with the form as part of a name/value pair. | `string` | `undefined` |
| `options` | -- | Options provided externally (for consumer-managed async). | `MultiselectOption[]` | `undefined` |
| `panelWidth` | `panel-width` | Width of the dropdown panel. Defaults to the trigger width. | `string` | `undefined` |
| `placeholder` | `placeholder` | Placeholder text for the input field. | `string` | `'Select...'` |
| `required` | `required` | If true, the multiselect is required. | `boolean` | `false` |
| `triggerWidth` | `trigger-width` | Width of the trigger button (and reference for dropdown positioning). | `string` | `'100%'` |
| `value` | -- | Array of selected option values. | `string[]` | `[]` |


## Events
Expand Down
Loading