search tweak

CHANGELOG.md

@@ -1,4 +1,6 @@
 # Changelog
+## [34.2.0] - 2026-09-28
+- Add optional showResultsList parameter to Search. Defaults to true (existing behaviour unchanged). Set to false to suppress Search's own results list/modal when a consumer (e.g. a DataGrid) renders the filtered results itself.
 ## [34.1.0] - 2026-09-09
 - Show path to Navigation search results
 ## [33.0.1] - 2026-07-29

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linn-it/linn-form-components-library",
-  "version": "34.1.0",
+  "version": "34.2.0",
   "private": false,
   "repository": {
     "type": "git",

src/components/Search.js

@@ -26,6 +26,7 @@ function Search({
     onResultSelect,
     resultLimit = null,
     resultsInModal = false,
+    showResultsList = true,
     clearSearch,
     searchOnEnter = true,
     onKeyPressFunctions = [],
@@ -153,7 +154,7 @@ function Search({
                     disabled,
                     onKeyDown: data => {
                         if (searchOnEnter && data.keyCode === 13) {
-                            if (resultsInModal) {
+                            if (resultsInModal && showResultsList) {
                                 setDialogOpen(true);
                             }
                             search(value);
@@ -168,32 +169,33 @@ function Search({
                     onBlur: handleOnBlur ? handleOnBlur : null
                 }}
             />
-            {resultsInModal ? (
-                <Dialog data-testid="modal" open={dialogOpen} fullWidth maxWidth="md">
-                    <Box>
-                        <IconButton
-                            sx={{
-                                float: 'right'
-                            }}
-                            aria-label="Close"
-                            onClick={() => setDialogOpen(false)}
-                            size="large"
-                        >
-                            <CloseIcon />
-                        </IconButton>
-                        <Box
-                            sx={{
-                                margin: theme => theme.spacing(6),
-                                minWidth: theme => theme.spacing(62)
-                            }}
-                        >
-                            {loading ? <Loading /> : results()}
+            {showResultsList &&
+                (resultsInModal ? (
+                    <Dialog data-testid="modal" open={dialogOpen} fullWidth maxWidth="md">
+                        <Box>
+                            <IconButton
+                                sx={{
+                                    float: 'right'
+                                }}
+                                aria-label="Close"
+                                onClick={() => setDialogOpen(false)}
+                                size="large"
+                            >
+                                <CloseIcon />
+                            </IconButton>
+                            <Box
+                                sx={{
+                                    margin: theme => theme.spacing(6),
+                                    minWidth: theme => theme.spacing(62)
+                                }}
+                            >
+                                {loading ? <Loading /> : results()}
+                            </Box>
                         </Box>
-                    </Box>
-                </Dialog>
-            ) : (
-                results()
-            )}
+                    </Dialog>
+                ) : (
+                    results()
+                ))}
         </>
     );
 }

src/components/__tests__/Search.test.js

@@ -142,3 +142,47 @@ describe('When chips', () => {
         expect(screen.getByText('chip 3')).toBeInTheDocument();
     });
 });
+
+describe('When showResultsList is false', () => {
+    beforeEach(() => {
+        render(
+            <Search
+                {...defaultProps}
+                value="RESULT"
+                showResultsList={false}
+                searchResults={[{ id: 'a', name: 'RESULT A' }]}
+            />
+        );
+        const input = screen.getByLabelText('Label');
+        fireEvent.keyDown(input, { key: 'Enter', keyCode: 13 });
+    });
+
+    test('does not render its own results list, for a consumer driving a different display', () => {
+        expect(screen.queryByTestId('result')).not.toBeInTheDocument();
+        expect(screen.queryByText('No matching items')).not.toBeInTheDocument();
+    });
+
+    test('still calls search as normal', () => {
+        expect(search).toHaveBeenCalledWith('RESULT');
+    });
+});
+
+describe('When showResultsList is false and resultsInModal is true', () => {
+    beforeEach(() => {
+        render(
+            <Search
+                {...defaultProps}
+                value="RESULT"
+                resultsInModal
+                showResultsList={false}
+                searchResults={[{ id: 'a', name: 'RESULT A' }]}
+            />
+        );
+        const input = screen.getByLabelText('Label');
+        fireEvent.keyDown(input, { key: 'Enter', keyCode: 13 });
+    });
+
+    test('does not open the modal either, so nothing hides other content on the page', () => {
+        expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+    });
+});