STCOM-1386 Paneset: check for existing id before registering pane (#2395

)

Panes can exhibit strange behavior in the dev environment that just
doesn't happen in production. I believe this is caused by pane
registration misbehaving in React StrictMode (where mounting happens
twice). This PR dedupes the panes by checking if a pane id already
exists in the paneset - and if it does, the pane is not added.

Problematic behavior can be seen specifically with panes that have
`defaultWidth: "fill"` - they'll be registered twice, and their width
calculation (which divides the remaining width among other `fill` panes)
will leave them being half the size they should be. Hiding a
search/filter pane can leave the results view at only 50% of its width,
when it should be the full width of the view when it's the only pane.

CHANGELOG.md

@@ -20,6 +20,7 @@
 * `<Tooltip>` should allow for tooltip content to be hovered without closing the tooltip. Refs STCOM-1391.
 * `<AdvancedSearchRow>` - 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)

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;
     }, () => {