diff --git a/CHANGELOG.md b/CHANGELOG.md index a629a07b0..45530ec4f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ * `` should allow for tooltip content to be hovered without closing the tooltip. Refs STCOM-1391. * `` - change `aria-label` for the input box to enter a search query and the Boolean operator dropdown. Refs STCOM-1195. * *BREAKING* Update `@csstools` postcss plugins to current versions in sync with `@folio/stripes-cli`. Refs STCOM-1404. +* Paneset - deduplicate panes via `id` prior to registration. Refs STCOM-1386. ## [12.2.0](https://github.com/folio-org/stripes-components/tree/v12.2.0) (2024-10-11) [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.1.0...v12.2.0) diff --git a/lib/Paneset/Paneset.js b/lib/Paneset/Paneset.js index c6c96e2cb..838dbbd75 100644 --- a/lib/Paneset/Paneset.js +++ b/lib/Paneset/Paneset.js @@ -442,10 +442,15 @@ class Paneset extends React.Component { this.interval = null; }); } else { - // insert sorted by left coordinate of clientrect... - const newPanes = insertByClientRect(newState.panes, paneObject); - newState = Object.assign(newState, { panes: newPanes, changeType: 'added' }); - // newState = this.insertPaneObject(newState, paneObject); + // check for duplicate id's before registering. Registration happens on mount. + // This will help with mount-twice strict mode strangeness + const paneExists = newState.panes.findIndex((p) => p.id === paneObject.id) + if (paneExists === -1) { + // insert sorted by left coordinate of clientrect... + const newPanes = insertByClientRect(newState.panes, paneObject); + newState = Object.assign(newState, { panes: newPanes, changeType: 'added' }); + // newState = this.insertPaneObject(newState, paneObject); + } } return newState; }, () => {