From a8404e9d9864370e5d172af56c2fb60210fea75a Mon Sep 17 00:00:00 2001
From: Austin Wildgrube <40448411+AustinWildgrube@users.noreply.github.com>
Date: Tue, 2 Jul 2024 05:44:34 -0500
Subject: [PATCH] [@mantine/core] Add option to display `nothingFoundMessage`
 when data is empty in Select and MultiSelect components (#6477)

* [@mantine/core] MultiSelect: Show not found message when not searchable

* [@mantine/core] Select: Show not found message when not searchable

* [mantine.dev] update the notFoundMessage prop information
---
 apps/mantine.dev/src/pages/core/multi-select.mdx    |  5 ++---
 apps/mantine.dev/src/pages/core/select.mdx          |  5 ++---
 .../src/components/MultiSelect/MultiSelect.test.tsx | 13 +++++++++++++
 .../core/src/components/MultiSelect/MultiSelect.tsx |  8 ++------
 .../components/MultiSelect/MutliSelect.story.tsx    | 12 ++++++++++++
 .../core/src/components/Select/Select.story.tsx     | 12 ++++++++++++
 .../core/src/components/Select/Select.test.tsx      |  6 ++++++
 .../@mantine/core/src/components/Select/Select.tsx  |  4 ++--
 8 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/apps/mantine.dev/src/pages/core/multi-select.mdx b/apps/mantine.dev/src/pages/core/multi-select.mdx
index eaa17e4d06..5b8ffec799 100644
--- a/apps/mantine.dev/src/pages/core/multi-select.mdx
+++ b/apps/mantine.dev/src/pages/core/multi-select.mdx
@@ -68,9 +68,8 @@ function Demo() {
 
 ## Nothing found
 
-Set `nothingFoundMessage` prop to display given message when no options match search query.
-If `nothingFoundMessage` is not set, `MultiSelect` dropdown will be hidden when no options match search query.
-The message is not displayed when trimmed search query is empty.
+Set the `nothingFoundMessage` prop to display a given message when no options match the search query
+or there is no data available. If the `nothingFoundMessage` prop is not set, the `MultiSelect` dropdown will be hidden.
 
 <Demo data={MultiSelectDemos.nothingFound} />
 
diff --git a/apps/mantine.dev/src/pages/core/select.mdx b/apps/mantine.dev/src/pages/core/select.mdx
index e0d970a149..ed75047227 100644
--- a/apps/mantine.dev/src/pages/core/select.mdx
+++ b/apps/mantine.dev/src/pages/core/select.mdx
@@ -100,9 +100,8 @@ function Demo() {
 
 ## Nothing found
 
-Set `nothingFoundMessage` prop to display given message when no options match search query.
-If `nothingFoundMessage` is not set, `Select` dropdown will be hidden when no options match search query.
-The message is not displayed when trimmed search query is empty.
+Set the `nothingFoundMessage` prop to display a given message when no options match the search query
+or there is no data available. If the `nothingFoundMessage` prop is not set, the `Select` dropdown will be hidden.
 
 <Demo data={SelectDemos.nothingFound} />
 
diff --git a/packages/@mantine/core/src/components/MultiSelect/MultiSelect.test.tsx b/packages/@mantine/core/src/components/MultiSelect/MultiSelect.test.tsx
index b99f536a4b..3e3c9b8e3f 100644
--- a/packages/@mantine/core/src/components/MultiSelect/MultiSelect.test.tsx
+++ b/packages/@mantine/core/src/components/MultiSelect/MultiSelect.test.tsx
@@ -82,4 +82,17 @@ describe('@mantine/core/MultiSelect', () => {
     await userEvent.click(screen.getByRole('textbox'));
     expect(screen.queryByRole('listbox')).toBe(null);
   });
+
+  it('displays the nothing found message if no options matched the search query', async () => {
+    render(<MultiSelect {...defaultProps} searchable nothingFoundMessage="Nothing found" />);
+    await userEvent.click(screen.getByRole('textbox'));
+    await userEvent.type(screen.getByRole('textbox'), 'test-3');
+    expect(screen.getByText('Nothing found')).toBeVisible();
+  });
+
+  it('displays the nothing found message if there is no data', async () => {
+    render(<MultiSelect {...defaultProps} data={[]} nothingFoundMessage="No data" />);
+    await userEvent.click(screen.getByRole('textbox'));
+    expect(screen.getByText('No data')).toBeVisible();
+  });
 });
diff --git a/packages/@mantine/core/src/components/MultiSelect/MultiSelect.tsx b/packages/@mantine/core/src/components/MultiSelect/MultiSelect.tsx
index 395dfe1971..823319276b 100644
--- a/packages/@mantine/core/src/components/MultiSelect/MultiSelect.tsx
+++ b/packages/@mantine/core/src/components/MultiSelect/MultiSelect.tsx
@@ -73,7 +73,7 @@ export interface MultiSelectProps
   /** Determines whether the select should be searchable, `false` by default */
   searchable?: boolean;
 
-  /** Message displayed when no option matched current search query, only applicable when `searchable` prop is set */
+  /** Message displayed when no option matches the current search query while the `searchable` prop is set or there is no data */
   nothingFoundMessage?: React.ReactNode;
 
   /** Determines whether check icon should be displayed near the selected option label, `true` by default */
@@ -408,11 +408,7 @@ export const MultiSelect = factory<MultiSelectFactory>((_props, ref) => {
           filter={filter}
           search={_searchValue}
           limit={limit}
-          hiddenWhenEmpty={
-            !searchable ||
-            !nothingFoundMessage ||
-            (hidePickedOptions && filteredData.length === 0 && _searchValue.trim().length === 0)
-          }
+          hiddenWhenEmpty={!nothingFoundMessage}
           withScrollArea={withScrollArea}
           maxDropdownHeight={maxDropdownHeight}
           filterOptions={searchable}
diff --git a/packages/@mantine/core/src/components/MultiSelect/MutliSelect.story.tsx b/packages/@mantine/core/src/components/MultiSelect/MutliSelect.story.tsx
index 2195183f9d..363089e950 100644
--- a/packages/@mantine/core/src/components/MultiSelect/MutliSelect.story.tsx
+++ b/packages/@mantine/core/src/components/MultiSelect/MutliSelect.story.tsx
@@ -215,6 +215,18 @@ export function Searchable() {
   );
 }
 
+export function NoDataProvidedMessage() {
+  return (
+    <div style={{ padding: 40 }}>
+      <MultiSelect
+        data={[]}
+        placeholder="MultiSelect something"
+        nothingFoundMessage="Try adding some data..."
+      />
+    </div>
+  );
+}
+
 export function SearchableHidePicked() {
   return (
     <div style={{ padding: 40 }}>
diff --git a/packages/@mantine/core/src/components/Select/Select.story.tsx b/packages/@mantine/core/src/components/Select/Select.story.tsx
index 136c60c060..987b38b796 100644
--- a/packages/@mantine/core/src/components/Select/Select.story.tsx
+++ b/packages/@mantine/core/src/components/Select/Select.story.tsx
@@ -266,6 +266,18 @@ export function Searchable() {
   );
 }
 
+export function NoDataProvidedMessage() {
+  return (
+    <div style={{ padding: 40 }}>
+      <Select
+        data={[]}
+        placeholder="Select something"
+        nothingFoundMessage="Try adding some data..."
+      />
+    </div>
+  );
+}
+
 export function HiddenDropdown() {
   return (
     <div style={{ padding: 40 }}>
diff --git a/packages/@mantine/core/src/components/Select/Select.test.tsx b/packages/@mantine/core/src/components/Select/Select.test.tsx
index 617d0850c3..3ff5b9d3ae 100644
--- a/packages/@mantine/core/src/components/Select/Select.test.tsx
+++ b/packages/@mantine/core/src/components/Select/Select.test.tsx
@@ -113,6 +113,12 @@ describe('@mantine/core/Select', () => {
     expect(screen.getByText('Nothing found')).toBeVisible();
   });
 
+  it('displays the nothing found message if there is no data', async () => {
+    render(<Select {...defaultProps} data={[]} nothingFoundMessage="No data" />);
+    await userEvent.click(screen.getByRole('textbox'));
+    expect(screen.getByText('No data')).toBeVisible();
+  });
+
   it('allows controlling search value with searchValue prop', async () => {
     render(<Select {...defaultProps} searchable searchValue="test-1" />);
     await userEvent.click(screen.getByRole('textbox'));
diff --git a/packages/@mantine/core/src/components/Select/Select.tsx b/packages/@mantine/core/src/components/Select/Select.tsx
index 25de7c4904..8fda3c2dc8 100644
--- a/packages/@mantine/core/src/components/Select/Select.tsx
+++ b/packages/@mantine/core/src/components/Select/Select.tsx
@@ -54,7 +54,7 @@ export interface SelectProps
   /** Position of the check icon relative to the option label, `'left'` by default */
   checkIconPosition?: 'left' | 'right';
 
-  /** Message displayed when no option matched current search query, only applicable when `searchable` prop is set */
+  /** Message displayed when no option matches the current search query while the `searchable` prop is set or there is no data */
   nothingFoundMessage?: React.ReactNode;
 
   /** Controlled search value */
@@ -296,7 +296,7 @@ export const Select = factory<SelectFactory>((_props, ref) => {
           filter={filter}
           search={search}
           limit={limit}
-          hiddenWhenEmpty={!searchable || !nothingFoundMessage}
+          hiddenWhenEmpty={!nothingFoundMessage}
           withScrollArea={withScrollArea}
           maxDropdownHeight={maxDropdownHeight}
           filterOptions={searchable && selectedOption?.label !== search}