Merge pull request #983 from objectstack-ai/copilot/fix-search-box-popover-layout

Author: hotlong

packages/plugin-list/src/ListView.tsx

@@ -557,15 +557,33 @@ export const ListView: React.FC<ListViewProps> = ({
     if (schema.data && typeof schema.data === 'object' && !Array.isArray(schema.data)) {
       const dataConfig = schema.data as any;
       if (dataConfig.provider === 'value' && Array.isArray(dataConfig.items)) {
-        setData(dataConfig.items);
+        let items = dataConfig.items;
+        if (searchTerm) {
+          const q = searchTerm.toLowerCase();
+          items = items.filter((row: any) =>
+            Object.values(row).some(
+              (v) => v != null && String(v).toLowerCase().includes(q),
+            ),
+          );
+        }
+        setData(items);
         setLoading(false);
         setDataLimitReached(false);
         return;
       }
     }
     // Also support schema.data as a plain array (shorthand for value provider)
     if (Array.isArray(schema.data)) {
-      setData(schema.data as any[]);
+      let items = schema.data as any[];
+      if (searchTerm) {
+        const q = searchTerm.toLowerCase();
+        items = items.filter((row: any) =>
+          Object.values(row).some(
+            (v) => v != null && String(v).toLowerCase().includes(q),
+          ),
+        );
+      }
+      setData(items);
       setLoading(false);
       setDataLimitReached(false);
       return;
@@ -1455,7 +1473,7 @@ export const ListView: React.FC<ListViewProps> = ({
                   <Search className="h-3.5 w-3.5" />
                 </Button>
               </PopoverTrigger>
-              <PopoverContent align="end" className="w-64 p-2" data-testid="search-popover">
+              <PopoverContent align="end" className="w-[calc(100vw-2rem)] sm:w-64 p-2" data-testid="search-popover">
                 <div className="relative">
                   <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
                   <Input

packages/plugin-list/src/__tests__/ListView.test.tsx

@@ -1577,6 +1577,68 @@ describe('ListView', () => {
       expect(mockDataSource.find).not.toHaveBeenCalled();
     });
 
+    it('should filter inline array data by searchTerm', async () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name', 'email'],
+        data: [
+          { _id: '1', name: 'Alice', email: 'alice@test.com' },
+          { _id: '2', name: 'Bob', email: 'bob@test.com' },
+          { _id: '3', name: 'Charlie', email: 'charlie@test.com' },
+        ] as any,
+      };
+
+      mockDataSource.find.mockClear();
+      renderWithProvider(<ListView schema={schema} dataSource={mockDataSource} />);
+
+      await vi.waitFor(() => {
+        expect(screen.getByText('3 records')).toBeInTheDocument();
+      });
+
+      // Open search popover and type search query
+      fireEvent.click(screen.getByTestId('search-icon-button'));
+      fireEvent.change(screen.getByPlaceholderText(/search/i), { target: { value: 'alice' } });
+
+      await vi.waitFor(() => {
+        expect(screen.getByText('1 record')).toBeInTheDocument();
+      });
+      expect(mockDataSource.find).not.toHaveBeenCalled();
+    });
+
+    it('should filter value provider data by searchTerm', async () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name', 'email'],
+        data: {
+          provider: 'value',
+          items: [
+            { _id: '1', name: 'Alice', email: 'alice@test.com' },
+            { _id: '2', name: 'Bob', email: 'bob@test.com' },
+          ],
+        } as any,
+      };
+
+      mockDataSource.find.mockClear();
+      renderWithProvider(<ListView schema={schema} dataSource={mockDataSource} />);
+
+      await vi.waitFor(() => {
+        expect(screen.getByText('2 records')).toBeInTheDocument();
+      });
+
+      // Open search popover and type search query
+      fireEvent.click(screen.getByTestId('search-icon-button'));
+      fireEvent.change(screen.getByPlaceholderText(/search/i), { target: { value: 'bob' } });
+
+      await vi.waitFor(() => {
+        expect(screen.getByText('1 record')).toBeInTheDocument();
+      });
+      expect(mockDataSource.find).not.toHaveBeenCalled();
+    });
+
     it('should fall back to dataSource.find when schema.data is not set', async () => {
       const mockItems = [
         { _id: '1', name: 'Alice', email: 'alice@test.com' },