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:
@@ -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/)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user