feat(ui): improve hasMany TextField UX (#10976)

### What?

This updates the UX of `TextFields` with `hasMany: true` by:
- Removing the dropdown menu and its indicator
- Removing the ClearIndicator
- Making text items directly editable

### Why?
- The dropdown didn’t enhance usability.
- The ClearIndicator removed all values at once with no way to undo,
risking accidental data loss. Backspace still allows quick and
intentional clearing.
- Previously, text items could only be removed and re-added, but not
edited inline. Allowing inline editing improves the editing experience.

### How?


https://github.com/user-attachments/assets/02e8cc26-7faf-4444-baa1-39ce2b4547fa
This commit is contained in:
Tobias Odendahl
2025-02-06 12:02:55 +01:00
committed by GitHub
parent 694c76d51a
commit d8cfdc7bcb
6 changed files with 118 additions and 4 deletions

View File

@@ -240,4 +240,44 @@ describe('Text', () => {
await expect(field.locator('.rs__value-container')).toContainText(input)
await expect(field.locator('.rs__value-container')).toContainText(furtherInput)
})
test('should allow editing hasMany text field values by clicking', async () => {
const originalText = 'original'
const newText = 'new'
await page.goto(url.create)
// fill required field
const requiredField = page.locator('#field-text')
await requiredField.fill(String(originalText))
const field = page.locator('.field-hasMany')
// Add initial value
await field.click()
await page.keyboard.type(originalText)
await page.keyboard.press('Enter')
// Click to edit existing value
const value = field.locator('.multi-value-label__text')
await value.click()
await value.dblclick()
await page.keyboard.type(newText)
await page.keyboard.press('Enter')
await saveDocAndAssert(page)
await expect(field.locator('.rs__value-container')).toContainText(`${newText}`)
})
test('should not allow editing hasMany text field values when disabled', async () => {
await page.goto(url.create)
const field = page.locator('.field-readOnlyHasMany')
// Try to click to edit
const value = field.locator('.multi-value-label__text')
await value.click({ force: true })
// Verify it does not become editable
await expect(field.locator('.multi-value-label__text')).not.toHaveClass(/.*--editable/)
})
})

View File

@@ -127,6 +127,15 @@ const TextFields: CollectionConfig = {
type: 'text',
hasMany: true,
},
{
name: 'readOnlyHasMany',
type: 'text',
hasMany: true,
admin: {
readOnly: true,
},
defaultValue: ['default'],
},
{
name: 'validatesHasMany',
type: 'text',