Repository navigation
Unify chip input and editable Combobox - #43300
Merged
Merged
Conversation
mdo
added
docs
julien-deramond
added
html
mdo
force-pushed
the
codex-combobox-editor
branch
from
November 5, 2026 07:24
5e2a232 to
d0fb749
Compare
✅ Deploy Preview for twbs-bootstrap ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
julien-deramond
removed
the
has-conflicts
7 of 10 tasks
samyferhat
added a commit
to samyferhat/bootstrap
that referenced
this pull request
Nov 7, 2026
Without a hidden input, the combobox fired no native event, so a form listener never saw the change. The toggle now fires input and change in that case, like twbs#43300 does. Add a test for a selection made with Enter. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
julien-deramond
added
the
has-conflicts
Multiple selections now submit one field per value. Commas stay in the value, and an empty multiple selection submits no entries. Reuse an explicit hidden input without removing application-owned fields. Keep a stable field for input and change listeners. Sync fields before notifications, restore initial selections on reset, and follow disabled state and form ownership. Document the update and disposal contracts. Forward Menu lifecycle events after its transitions. Keep native search editing keys and cover the sticky search padding with logical CSS.
Search and select values from one editable field. Multiple selections render as removable chips, and explicit free entry supports tags. Keep query text separate from committed values and preserve native form data. Use the existing Menu for positioning and lifecycle. Keep focus in the editor while suggestions are highlighted. Preserve chip nodes, caret positions, reset behavior, and input-method text during reconciliation. Retire the separate Chips plugin and chip-input control. Keep static chip styles and button-triggered Combobox markup. Document the alpha 2 markup, token, method, and event migration.
Multiple values should fit the same row height as a normal input. Use shared input spacing and typography, with smaller contextual chips. Let the field grow when its values wrap. Replace the text dismiss glyph with the SVG from the chip documentation. Keep the named removal button and existing chip interaction behavior.
Render the dismiss icon at 12px inside a 24px removal button. Move chips closer to the field's inline start while keeping normal text padding for an empty editor. Use logical spacing so the inset follows RTL.
Use negative inline margins to bring the dismiss button closer to the label and chip edge. Keep its 24px hit area and 12px SVG artwork.
Use a nested chip radius based on the wrapping field's radius, border, and inset. Clamp the result at zero so square fields keep square chips.
Match the field's inline padding to its vertical padding when chips are present. Derive chip corners from that inset and pull the dismiss button's end margin in another 2px without reducing its hit area.
Use half the field radius for chips so equal input padding does not leave their corners nearly square. Keep square fields square.
Highlight chips with the filled active state when users navigate or select them. Restore modifier clicks, anchored ranges, select-all, and deletion of highlighted chips. Keep native query editing and RTL keys. Keep chip highlights separate from committed values. Report UI selection through select.bs.combobox and restore the chip selection methods on Combobox. Bulk removal honors each cancellation and emits one value change before recovering focus. Document the restored interaction and alpha migration. Cover range anchors, duplicate values, disabled chips, reset, and disposal.
Tabbing to a chip's remove button or focusing a chip directly should show its primary selected state. Apply that highlight without changing committed values, and dismiss the suggestion popup. Guard focus controlled by range navigation and modifier clicks so it does not collapse or undo the user's chip selection.
Keep the filled selected chip and the wrapping field's focus ring as focus indicators. Suppress the nested outlines on chips and their remove buttons during keyboard navigation.
Selection callbacks can change or dispose the component before an outer operation completes. Stop stale selection and focus work after those callbacks, and keep pending popup sizing from changing disposed markup. Handle native composition events through the shared event system. Keep unfinished input out of blur commits, reconcile completed composition, and preserve focus after the editor loses it. Let the IME handle its keys in both Combobox and Menu. Follow external reset forms without a backing field, omit disabled single options, and clear references to removed or disabled suggestions. Add regressions and clarify the synchronous form update requirement.
Chips can stand alone or appear within a form component. Place their docs in Components and describe that wider use. Keep the old Forms URL as a redirect, and update navigation and cross-links.
Static chips change color and show a pointer cursor on hover, even when they have no action. Keep static chips neutral and apply hover feedback to links, buttons, and Combobox chips. A dismiss button keeps its own hover state without changing the whole chip. Add interactive examples and correct the documented CSS layer. Allow for the extra selectors in the unminified CSS bundle budget.
Show search and selection in the input from the first example. Use inputs for the shared examples and group the button variants together. Use the editable markup in the form and setup guidance too.
Describe editable inputs and button toggles in the original overview. Include chips, free entry, form submission, and selection events.
Match the form field examples by adding the source indentation that MDX strips. Record the convention in the docs guidance.
Clicking a searchable combobox moved focus to the trigger before the opening animation moved it to search. Focus search as soon as the menu opens. Keep the trigger in the tab order and return focus to it on Escape.
Round the three JavaScript bundle limits up to the next quarter kilobyte to account for the search focus changes. Reword the docs indentation rule so it passes the spelling check.
A canceled second reset could discard a completed reset. Keep each pending reset until its own callback runs. Give button-mode options listbox roles, handle Escape on the toggle, and restore chip focus rings. Keep long values inside the field and use shared state tokens.
Compact controls were 30px tall, but their fixed-height chips made the multiple-selection field 34px tall. Derive chip and dismiss-button heights from the space left by the control padding and borders. Check compact, default, and spacious controls in the browser.
The former chip input page now points to Combobox. Explain the consolidation at the top of that page and link the migration steps for existing chip inputs.
The rebased build includes the merged Range and hash-link fixes. Raise the three affected limits to the next standard budget step.
mdo
force-pushed
the
codex-combobox-editor
branch
from
November 12, 2026 20:46
f27c7e3 to
b2a244b
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #43000, fixes #43001, fixes #43035, fixes #43036, fixes #43281.
Closes #43005. Closes #43096. Closes #43117. Closes #43261. Closes #43269. Closes #43289. Closes #43299.
Fixes julien-deramond/bootstrap-test-playground#6, fixes julien-deramond/bootstrap-test-playground#7, fixes julien-deramond/bootstrap-test-playground#8, fixes julien-deramond/bootstrap-test-playground#156, fixes julien-deramond/bootstrap-test-playground#178, fixes julien-deramond/bootstrap-test-playground#261, and fixes julien-deramond/bootstrap-test-playground#326.
Addresses the Combobox and Chips portions of julien-deramond/bootstrap-test-playground#208 and julien-deramond/bootstrap-test-playground#209. Applications still own asynchronous option loading (#43030). Initial selection comes from
.selectedmarkup, including when a hidden input is provided.Physical iOS IME and screen reader checks remain manual.