[@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

@@ -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} />
 

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} />
 

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();
+  });
 });

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}

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 }}>

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 }}>

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'));

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}