From 4349f109bb5b2c4d5de2bd59a66d3a78fa2b0e34 Mon Sep 17 00:00:00 2001
From: John Coburn <jcoburn@ebsco.com>
Date: Wed, 2 Oct 2024 11:01:18 -0500
Subject: [PATCH] STCOM-1344 - Selection render value via formatter to contain
 text (#2356)

* render value via formatter to contain text

* Update CHANGELOG.md

* trim empty searchTerm prop in value filter
---
 CHANGELOG.md               | 1 +
 lib/Selection/Selection.js | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e59367455..07629cf6b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -50,6 +50,7 @@
 * Use whole `dataOptions` array for memoization dependency rather that just `length` property. STCOM-1346.
 * Default the scope of `<CommandList>` to `document.body`. Remove internal wrapping div. Refs STCOM-1351.
 * Remove inline styling from `<Modal>` content. Refs STCOM-1348.
+* Use `<Selection>`'s formatter for rendering the selected value within the field and prevent overflow of text. Refs STCOM-1344.
 
 ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.0.0...v12.1.0)
diff --git a/lib/Selection/Selection.js b/lib/Selection/Selection.js
index e8a10e124..e363ce873 100644
--- a/lib/Selection/Selection.js
+++ b/lib/Selection/Selection.js
@@ -212,7 +212,7 @@ const Selection = ({
     }
   }, [dataOptions, selectedItem, value])
 
-  const valueLabel = defaultItemToString(selectedItem) || placeholder || '';
+  const valueLabel = formatter({ option: selectedItem }) || placeholder || '';
   const labelId = `sl-label-${testId}`;
   const valueId = `selected-${testId}-item`;