fix(ui): unable to search for nested fields in WhereBuilder field selection (#11986)

### What?
Extract text from the React node label in WhereBuilder

### Why?
If you have a nested field in filter options, the label would show
correctly, but the search will not work

### How
By adding an `extractTextFromReactNode` function that gets text out of
React.node label

### Code setup:
```
{
      type: "collapsible",
      label: "Meta",
      fields: [
        {
          name: 'media',
          type: 'relationship',
          relationTo: 'media',
          label: 'Ferrari',
          filterOptions: () => {
            return {
              id: { in: ['67efdbc872ca925bc2868933'] },
            }
          }
        },
        {
          name: 'media2',
          type: 'relationship',
          relationTo: 'media',
          label: 'Williams',
          filterOptions: () => {
            return {
              id: { in: ['67efdbc272ca925bc286891c'] },
            }
          }
        },
      ],
    },
    
 ```
  
### Before:

https://github.com/user-attachments/assets/25d4b3a2-6ac0-476b-973e-575238e916c4

  
 ### After:

https://github.com/user-attachments/assets/92346a6c-b2d1-4e08-b1e4-9ac1484f9ef3

---------

Co-authored-by: Jacob Fletcher <jacobsfletch@gmail.com>
This commit is contained in:
Ruslan
2025-05-05 19:09:26 +02:00
committed by GitHub
parent a6d76d6058
commit 38186346f7
5 changed files with 57 additions and 1 deletions

View File

@@ -393,6 +393,24 @@ describe('List View', () => {
await expect(page.locator(tableRowLocator)).toHaveCount(2)
})
test('should search for nested fields in field dropdown', async () => {
await page.goto(postsUrl.list)
await openListFilters(page, {})
const whereBuilder = page.locator('.where-builder')
await whereBuilder.locator('.where-builder__add-first-filter').click()
const conditionField = whereBuilder.locator('.condition__field')
await conditionField.click()
await conditionField.locator('input.rs__input').fill('Tab 1 > Title')
await expect(
conditionField.locator('.rs__menu-list').locator('div', {
hasText: exactText('Tab 1 > Title'),
}),
).toBeVisible()
})
test('should allow to filter in array field', async () => {
await createArray()