feat(inline-edit): only overlay for single select (#DS-4870) - #1840
Conversation
NikGurev
changed the title
|
Visit the preview URL for this PR (updated for commit e65eb5e): https://koobiq-next--prs-1840-duzh5bp9.web.app (expires Sat, 08 Aug 2026 12:35:53 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c |
|
/approve-snapshots |
|
🔄 Updating snapshots. |
|
✅ Snapshots updated! |
🚨 E2E tests failedReview the report for details. 💡 Comment |
🚨 E2E tests failedReview the report for details. 💡 Comment |
|
/approve-snapshots |
|
🔄 Updating snapshots. |
|
|
🚨 E2E tests failedReview the report for details. 💡 Comment |
🚨 E2E tests failedReview the report for details. 💡 Comment |
There was a problem hiding this comment.
Pull request overview
This PR makes the “select-style editor” (dropdown-only edit mode for single-value selects) a built-in kbq-inline-edit behavior by allowing an ancestor to override the connected-overlay origin used by nested KbqFormField controls.
Changes:
- Add
KBQ_CONNECTED_OVERLAY_ORIGIN+KbqConnectedOverlayOriginProviderso ancestors can redirect whereKbqFormField-hosted overlays anchor. - Update
KbqInlineEditto detect nested single selects and (when applicable) hide the bordered edit control container while relying on the select’s overlay anchored to the inline-edit host. - Add/adjust docs examples and expand unit + Playwright coverage for the new behavior.
Reviewed changes
Copilot reviewed 19 out of 21 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| tools/public_api_guard/components/inline-edit.api.md | Public API snapshot updates for KbqInlineEdit (provider interface + select detection/commit). |
| tools/public_api_guard/components/core.api.md | Public API snapshot updates for the new injection token + provider interface. |
| packages/components/core/form-field/form-field-ref.ts | Introduces KbqConnectedOverlayOriginProvider and KBQ_CONNECTED_OVERLAY_ORIGIN. |
| packages/components/form-field/form-field.ts | Uses optional KBQ_CONNECTED_OVERLAY_ORIGIN to compute overlay origin. |
| packages/components/inline-edit/inline-edit.ts | Implements overlay-origin provider + single-select detection and commit behavior. |
| packages/components/inline-edit/inline-edit.html | Adds select-style panel class binding for edit-mode overlay panel. |
| packages/components/inline-edit/inline-edit.scss | Styles select-style editor mode and hides the bordered control container. |
| packages/components/inline-edit/inline-edit.spec.ts | Adds unit tests for commit behavior and select-style editor behaviors. |
| packages/components/inline-edit/e2e.ts | Adds an e2e component for the multiline select-style editor. |
| packages/components/inline-edit/e2e.playwright-spec.ts | Adds visual regression coverage for multiline select-style editor. |
| packages/e2e/routes.ts | Registers the new inline-edit e2e route/component. |
| packages/docs-examples/example-module.ts | Registers new docs examples for inline-edit select variants. |
| packages/docs-examples/components/inline-edit/index.ts | Exports/registers new inline-edit select docs examples. |
| packages/docs-examples/components/inline-edit/inline-edit-select-basic/inline-edit-select-basic-example.ts | New docs example: basic single-select inline-edit usage. |
| packages/docs-examples/components/inline-edit/inline-edit-select-multiline/inline-edit-select-multiline-example.ts | New docs example: multiline dropdown options styling. |
| packages/docs-examples/components/inline-edit/inline-edit-select/inline-edit-select-example.ts | New/moved docs example for reset/“not set” option pattern. |
| packages/components/inline-edit/inline-edit.en.md | Docs updated to include select-style/multiline/reset sections. |
| packages/components/inline-edit/inline-edit.ru.md | RU docs updated to mirror EN changes. |
| packages/components-dev/inline-edit/module.ts | Adds new inline-edit select examples into the dev module. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
🚨 E2E tests failedReview the report for details. 💡 Comment |
|
/approve-snapshots |
|
🔄 Updating snapshots. |
|
✅ Snapshots updated! |
Summary
Makes the "select-style editor" pattern (dropdown-only edit mode, no bordered field) a built-in
kbq-inline-editbehavior instead of per-consumer CSS/markup boilerplate.KbqInlineEdit: auto-detects a nested single-value (non-multiple, non-multiline) select viacontentChild, and when present, hides the bordered field and opens just the dropdown, anchored to the inline-edit host — all built in, no manual wiring or::ng-deepCSS required from consumers.KbqFormField:getConnectedOverlayOrigin()now consults an optional ancestor-providedKBQ_CONNECTED_OVERLAY_ORIGIN(KbqConnectedOverlayOriginProvider) before falling back to its own container. This lets an ancestor likeKbqInlineEditredirect where any nested control's overlay (select, autocomplete, datepicker, etc.) is anchored — reusing the existing form-field DI mechanism instead of adding new public API toKbqSelect.KbqInlineEditimplementsKbqConnectedOverlayOriginProvider, returning its own box as the origin only for the select-style-editor case (isSingleSelect()); otherwise it returnsundefinedso unrelated controls (input, textarea, autocomplete, datepicker) keep their default form-field-anchored overlay.inline-edit-select-basic(vertical + horizontal single-select editors),inline-edit-select-multiline(multiline dropdown options); moved the originalinline-edit-selectexample under the "Reset"/"Сброс" section. Syncedinline-edit.en.mdwithinline-edit.ru.md.