Repository navigation
feat(rich-multi-select): add placeholderWithItems and clearInputOnSelect options - #18
Conversation
When placeholderWithItems is set in data-settings, the input placeholder switches to that text as soon as one item is selected, and reverts to the original placeholder when all items are removed. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
When clearInputOnSelect is true, the search input is cleared and the options list refreshed after each item is selected. Useful with remoteUrl to allow a fresh search immediately after picking an item. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Adds two new configuration options to the rich-multi-select component to improve UX when selecting multiple items: a dynamic placeholder when items are selected, and an option to clear the search input after each selection (useful for remote search flows).
Changes:
- Add
placeholderWithItemsto show an alternate placeholder when there’s at least one selected item. - Add
clearInputOnSelectto clear the search text and refresh options after selecting an item. - Update docs, examples, and tests to cover the new settings.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| tests/components/RichMultiSelect/RichMultiSelect.test.js | Adds unit tests for placeholderWithItems and clearInputOnSelect, plus extra TomSelect mock methods needed by the new behavior. |
| src/components/RichMultiSelect/RichMultiSelect.js | Implements placeholder switching on change and input clearing/refresh on item add based on new settings flags. |
| README.md | Documents the new options and includes a usage snippet for placeholderWithItems. |
| example/index.html | Demonstrates clearInputOnSelect with remote loading and adds a new demo for placeholderWithItems. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Set the initial placeholder value on control_input before calling onChange so the assertion verifies the value is actually preserved, not just that it differs from an arbitrary string. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
Fixed in a0237b2: set |
… internal resets TomSelect resets control_input.placeholder from settings.placeholder on focus/dropdown events, overwriting our change. Now both are updated in onChange so TomSelect's internal resets always read the correct value. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Truthy check rejected empty string as a valid placeholderWithItems value. Consistent with how placeholder uses ?? (null/undefined only). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
Fixed in 65b72b2: changed |
Summary
placeholderWithItems: nuevo setting opcional que muestra un texto diferente en el input cuando hay al menos un ítem seleccionado. Al vaciar la selección vuelve alplaceholderoriginal.clearInputOnSelect: nuevo setting booleano (falsepor defecto) que, cuando está activo, limpia el texto de búsqueda y refresca la lista de opciones al seleccionar un ítem. Especialmente útil combinado conremoteUrl.Test plan
npm run test)example/index.htmlque el placeholder del select estático cambia al seleccionar y restaura al limpiar🤖 Generated with Claude Code