+#### Селект без рамки
+
+При выборе открываем только выпадающее меню, но не показываем поле ввода, как у Select. Рамка поля ввода не требуется — достаточно выпадающего меню.
+
+
+
+После выбора опции поле возвращается в режим просмотра.
+
+#### Многострочное поле
+
+Иногда стоит делать опции в выпадающем списке многострочными. Рекомендуется выравнивать ширину выпадающего меню по ширине поля.
+
+
+
+#### Сброс
+
+Разместите элемент для очистки в выпадающем меню — ведь самого поля селекта не видно, поэтому другого подходящего места для кнопки сброса нет.
+
+Рекомендуем также добавить опцию, название которой явно даёт понять, что значение не установлено. Это будет логично перекликаться с формулировкой пустого поля в режиме просмотра.
+
+
+
+После выбора опции поле возвращается в режим просмотра.
+
### Рекомендации
Поле с инлайн-редактированием должны сохраняться сразу после изменения без общей для всего экрана кнопки «Сохранить».
diff --git a/packages/components/inline-edit/inline-edit.scss b/packages/components/inline-edit/inline-edit.scss
index bd423fbdaa..afc299b8f8 100644
--- a/packages/components/inline-edit/inline-edit.scss
+++ b/packages/components/inline-edit/inline-edit.scss
@@ -125,6 +125,12 @@
}
}
+ // Select-style editor: edit mode shows only the dropdown, not a bordered field, so the view
+ // text keeps showing through and just gets the "active" look instead.
+ &.kbq-inline-edit_select.kbq-inline-edit_edit {
+ --kbq-inline-edit-background: var(--kbq-states-background-transparent-active);
+ }
+
&:hover,
&.cdk-keyboard-focused,
&.kbq-inline-edit_anchor-focused {
@@ -187,6 +193,10 @@
padding: var(--kbq-size-xxs) var(--kbq-size-s) var(--kbq-size-s);
}
+ &.kbq-inline-edit__panel_select .kbq-inline-edit__control-container {
+ display: none;
+ }
+
.kbq-inline-edit__control-container,
.kbq-inline-edit__action-button {
box-shadow: var(--kbq-shadow-popup);
diff --git a/packages/components/inline-edit/inline-edit.spec.ts b/packages/components/inline-edit/inline-edit.spec.ts
index d1e7f88109..2b8e1cb743 100644
--- a/packages/components/inline-edit/inline-edit.spec.ts
+++ b/packages/components/inline-edit/inline-edit.spec.ts
@@ -16,7 +16,7 @@ import {
TAB
} from '@koobiq/components/core';
import { KbqDropdownModule } from '@koobiq/components/dropdown';
-import { KbqFormFieldModule } from '@koobiq/components/form-field';
+import { KbqFormField, KbqFormFieldModule } from '@koobiq/components/form-field';
import { KbqIconModule } from '@koobiq/components/icon';
import { KbqInputModule } from '@koobiq/components/input';
import { KbqSelectModule } from '@koobiq/components/select';
@@ -349,6 +349,42 @@ describe('KbqInlineEdit', () => {
expect(spyFn).not.toHaveBeenCalled();
});
+ it('should save and return to view mode when commit() is called directly', () => {
+ const fixture = setup(TestComponent);
+ const { componentInstance, debugElement } = fixture;
+ const inlineEditDebugElement: DebugElement = getInlineEditDebugElement(debugElement);
+ const spyFn = jest.spyOn(componentInstance, 'update');
+
+ inlineEditDebugElement.nativeElement.click();
+ fixture.detectChanges();
+
+ (inlineEditDebugElement.componentInstance as KbqInlineEdit).commit();
+ fixture.detectChanges();
+
+ expect(spyFn).toHaveBeenCalled();
+ expect(inlineEditDebugElement.classes['kbq-inline-edit_view']).toBe(true);
+ });
+
+ it('should not save when commit() is called while control is invalid', () => {
+ const fixture = setup(TestWithValidatedControl);
+ const { componentInstance, debugElement } = fixture;
+ const inlineEditDebugElement: DebugElement = getInlineEditDebugElement(debugElement);
+ const spyFn = jest.spyOn(componentInstance, 'update');
+
+ inlineEditDebugElement.nativeElement.click();
+ fixture.detectChanges();
+
+ componentInstance.control.markAsTouched();
+ componentInstance.control.updateValueAndValidity();
+ fixture.detectChanges();
+
+ (inlineEditDebugElement.componentInstance as KbqInlineEdit).commit();
+ fixture.detectChanges();
+
+ expect(spyFn).not.toHaveBeenCalled();
+ expect(inlineEditDebugElement.classes['kbq-inline-edit_edit']).toBe(true);
+ });
+
it('should reposition the edit mode overlay when the surrounding layout resizes', () => {
const resize$ = new Subject
();
const fixture = setup(TestComponent, [
@@ -517,6 +553,86 @@ describe('KbqInlineEdit', () => {
expect(document.querySelector(componentCssClasses.selectPanel)).toBeTruthy();
});
+ describe('select-style editor', () => {
+ it('should mark a single select as such and add the select-style panel class while editing', async () => {
+ const fixture = setup(TestWithSelect);
+ const { debugElement } = fixture;
+ const inlineEditDebugElement: DebugElement = getInlineEditDebugElement(debugElement);
+
+ expect(inlineEditDebugElement.classes['kbq-inline-edit_select']).toBe(true);
+
+ inlineEditDebugElement.nativeElement.click();
+ fixture.detectChanges();
+ await fixture.whenStable();
+
+ expect(document.querySelector(`${componentCssClasses.panel}.kbq-inline-edit__panel_select`)).toBeTruthy();
+ });
+
+ it('should connect the select panel to the inline-edit host', async () => {
+ const fixture = setup(TestWithSelect);
+ const { debugElement } = fixture;
+ const inlineEditDebugElement: DebugElement = getInlineEditDebugElement(debugElement);
+
+ inlineEditDebugElement.nativeElement.click();
+ fixture.detectChanges();
+ await fixture.whenStable();
+
+ const formField = fixture.debugElement.query(By.directive(KbqFormField)).componentInstance as KbqFormField;
+
+ expect(formField.getConnectedOverlayOrigin().nativeElement).toBe(inlineEditDebugElement.nativeElement);
+ });
+
+ it('should not treat a multi-select as a select-style editor', async () => {
+ const fixture = setup(TestWithMultiSelect);
+ const { debugElement } = fixture;
+ const inlineEditDebugElement: DebugElement = getInlineEditDebugElement(debugElement);
+
+ expect(inlineEditDebugElement.classes['kbq-inline-edit_select']).toBeFalsy();
+
+ inlineEditDebugElement.nativeElement.click();
+ fixture.detectChanges();
+ await fixture.whenStable();
+
+ expect(document.querySelector(`${componentCssClasses.panel}.kbq-inline-edit__panel_select`)).toBeNull();
+ });
+
+ it('should not override the overlay origin for a non-select control', async () => {
+ const fixture = setup(TestComponent);
+ const { debugElement } = fixture;
+ const inlineEditDebugElement: DebugElement = getInlineEditDebugElement(debugElement);
+
+ inlineEditDebugElement.nativeElement.click();
+ fixture.detectChanges();
+ await fixture.whenStable();
+
+ const formField = fixture.debugElement.query(By.directive(KbqFormField)).componentInstance as KbqFormField;
+
+ expect(formField.getConnectedOverlayOrigin().nativeElement).not.toBe(inlineEditDebugElement.nativeElement);
+ });
+ });
+
+ it('should stay in view mode when commit() is followed by a redundant outside-click save()', async () => {
+ // A control whose panel is a separate CDK overlay (e.g. kbq-select) makes the overlay's own
+ // outside-click detection see clicks on that panel as "outside" inline-edit's overlay, so both
+ // the control's own (selectionChange)-driven commit() and the overlay's outside-click handler
+ // can fire for the same interaction. Since save() used to be an unconditional toggle, the
+ // second (redundant) call would flip the mode straight back to 'edit'.
+ const fixture = setup(TestWithSelectAutoCommit);
+ const { debugElement } = fixture;
+ const inlineEditDebugElement: DebugElement = getInlineEditDebugElement(debugElement);
+ const inlineEdit = inlineEditDebugElement.componentInstance as KbqInlineEdit;
+
+ inlineEditDebugElement.nativeElement.click();
+ fixture.detectChanges();
+ await fixture.whenStable();
+
+ inlineEdit.commit();
+ (inlineEdit as any).save();
+ fixture.detectChanges();
+
+ expect(inlineEditDebugElement.classes['kbq-inline-edit_view']).toBe(true);
+ });
+
describe('with multiple form fields', () => {
it('should emit saved event when both form fields are valid', async () => {
const fixture = setup(TestWithMultipleFormFields);
@@ -1140,6 +1256,58 @@ export class TestWithSelect extends BaseTestComponent {
cancel = jest.fn();
}
+@Component({
+ selector: 'name',
+ imports: [
+ FormsModule,
+ KbqInlineEditModule,
+ KbqOptionModule,
+ KbqSelectModule
+ ],
+ template: `
+
+ {{ selected() }}
+
+
+ @for (option of options; track option) {
+ {{ option }}
+ }
+
+
+
+ `
+})
+export class TestWithSelectAutoCommit {
+ readonly options = Array.from({ length: 5 }).map((_, i) => `Option #${i}`);
+ readonly selected = model(this.options[0]);
+}
+
+@Component({
+ selector: 'name',
+ imports: [
+ FormsModule,
+ KbqInlineEditModule,
+ KbqOptionModule,
+ KbqSelectModule
+ ],
+ template: `
+
+ {{ selected().join(', ') }}
+
+
+ @for (option of options; track option) {
+ {{ option }}
+ }
+
+
+
+ `
+})
+export class TestWithMultiSelect {
+ readonly options = Array.from({ length: 5 }).map((_, i) => `Option #${i}`);
+ readonly selected = model([this.options[0]]);
+}
+
@Component({
selector: 'name',
imports: [ReactiveFormsModule, KbqFormFieldModule, KbqInlineEditModule, KbqTextareaModule],
diff --git a/packages/components/inline-edit/inline-edit.ts b/packages/components/inline-edit/inline-edit.ts
index 5237807afe..a5680f3fee 100644
--- a/packages/components/inline-edit/inline-edit.ts
+++ b/packages/components/inline-edit/inline-edit.ts
@@ -14,6 +14,7 @@ import {
Directive,
effect,
ElementRef,
+ forwardRef,
inject,
input,
numberAttribute,
@@ -29,15 +30,18 @@ import { AbstractControl, NgControl } from '@angular/forms';
import { KbqButtonModule } from '@koobiq/components/button';
import {
isElement,
+ KBQ_CONNECTED_OVERLAY_ORIGIN,
KbqAnimationCurves,
KbqAnimationDurations,
KbqComponentColors,
+ KbqConnectedOverlayOriginProvider,
kbqInjectA11yLocaleConfiguration,
PopUpPlacements
} from '@koobiq/components/core';
import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
import { KbqFormField, KbqLabel } from '@koobiq/components/form-field';
import { KbqIcon } from '@koobiq/components/icon';
+import { KbqSelect } from '@koobiq/components/select';
import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
import { merge, skip } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@@ -129,6 +133,7 @@ export class KbqInlineEditMenu {
],
templateUrl: './inline-edit.html',
styleUrls: ['./inline-edit.scss', './inline-edit-tokens.scss'],
+ providers: [{ provide: KBQ_CONNECTED_OVERLAY_ORIGIN, useExisting: forwardRef(() => KbqInlineEdit) }],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
@@ -139,17 +144,16 @@ export class KbqInlineEditMenu {
'[class.kbq-inline-edit_with-menu]': '!!menu()',
'[class.kbq-inline-edit_disabled]': 'disabled()',
'[class.kbq-inline-edit_anchor-focused]': 'anchorFocused()',
+ '[class.kbq-inline-edit_select]': 'isSingleSelect()',
'(click)': 'onClick($event)',
'(keydown.enter)': 'onClick($event)',
'(keydown.space)': 'onClick($event)'
},
- hostDirectives: [
- CdkMonitorFocus
- ],
+ hostDirectives: [CdkMonitorFocus],
animations: [KBQ_INLINE_EDIT_ACTION_BUTTONS_ANIMATION],
exportAs: 'kbqInlineEdit'
})
-export class KbqInlineEdit {
+export class KbqInlineEdit implements KbqConnectedOverlayOriginProvider {
/** Accessible names for the icon-only save/cancel buttons. */
protected readonly a11yLocaleConfiguration = kbqInjectA11yLocaleConfiguration();
@@ -217,6 +221,19 @@ export class KbqInlineEdit {
/** @docs-private */
protected readonly formFieldRefList = contentChildren(KbqFormField, { descendants: true });
+ /** @docs-private */
+ protected readonly selectRef = contentChild(KbqSelect, { descendants: true });
+ /**
+ * Whether edit mode contains a single-value select. When true, edit mode shows only the
+ * dropdown panel instead of a bordered field - see the "Select-style editor" example.
+ * @docs-private
+ */
+ protected readonly isSingleSelect = computed(() => {
+ const select = this.selectRef();
+
+ return !!select && !select.multiple && !select.multiline();
+ });
+
/** @docs-private */
protected overlayOrigin: HTMLElement = this.elementRef.nativeElement;
/** @docs-private */
@@ -283,6 +300,21 @@ export class KbqInlineEdit {
this.mode.update((mode) => (mode === 'view' ? 'edit' : 'view'));
}
+ /**
+ * Implements `KbqConnectedOverlayOriginProvider`, letting a nested `KbqFormField`'s control
+ * anchor its overlay to this element instead of the form-field's own container.
+ * When no override is needed, the form-field falls back to its default.
+ * @docs-private
+ */
+ getConnectedOverlayOrigin(): ElementRef | undefined {
+ return this.isSingleSelect() ? this.elementRef : undefined;
+ }
+
+ /** Saves the current value and returns to view mode, running the same validation as a normal save. */
+ commit(): void {
+ this.save();
+ }
+
/** @docs-private */
protected onClick(event: Event): void {
if (this.disabled() || this.isEditMode() || this.isInteractiveElement(event.target)) return;
@@ -331,6 +363,10 @@ export class KbqInlineEdit {
/** @docs-private */
protected save($event?: Event): void {
+ // Guards against a control triggering both its own commit() and the overlay's outside-click handler for the
+ // same interaction — without this, the second call would toggle back into edit mode.
+ if (!this.isEditMode()) return;
+
if (this.isInvalid()) {
$event?.stopPropagation();
diff --git a/packages/docs-examples/components/inline-edit/index.ts b/packages/docs-examples/components/inline-edit/index.ts
index cfe9fc7eca..72601bbfa3 100644
--- a/packages/docs-examples/components/inline-edit/index.ts
+++ b/packages/docs-examples/components/inline-edit/index.ts
@@ -10,6 +10,9 @@ import { InlineEditHorizontalListExample } from './inline-edit-horizontal-list/i
import { InlineEditMenuExample } from './inline-edit-menu/inline-edit-menu-example';
import { InlineEditOnCleanExample } from './inline-edit-on-clean/inline-edit-on-clean-example';
import { InlineEditOverviewExample } from './inline-edit-overview/inline-edit-overview-example';
+import { InlineEditSelectBasicExample } from './inline-edit-select-basic/inline-edit-select-basic-example';
+import { InlineEditSelectMultilineExample } from './inline-edit-select-multiline/inline-edit-select-multiline-example';
+import { InlineEditSelectExample } from './inline-edit-select/inline-edit-select-example';
import { InlineEditUnfilledExample } from './inline-edit-unfilled/inline-edit-unfilled-example';
import { InlineEditValidationExample } from './inline-edit-validation/inline-edit-validation-example';
import { InlineEditVerticalListExample } from './inline-edit-vertical-list/inline-edit-vertical-list-example';
@@ -27,6 +30,9 @@ export {
InlineEditMenuExample,
InlineEditOnCleanExample,
InlineEditOverviewExample,
+ InlineEditSelectBasicExample,
+ InlineEditSelectExample,
+ InlineEditSelectMultilineExample,
InlineEditUnfilledExample,
InlineEditValidationExample,
InlineEditVerticalListExample,
@@ -40,6 +46,9 @@ const EXAMPLES = [
InlineEditDisabledExample,
InlineEditHorizontalListExample,
InlineEditOnCleanExample,
+ InlineEditSelectBasicExample,
+ InlineEditSelectExample,
+ InlineEditSelectMultilineExample,
InlineEditValidationExample,
InlineEditCustomHandlerExample,
InlineEditVerticalListExample,
diff --git a/packages/docs-examples/components/inline-edit/inline-edit-select-basic/inline-edit-select-basic-example.ts b/packages/docs-examples/components/inline-edit/inline-edit-select-basic/inline-edit-select-basic-example.ts
new file mode 100644
index 0000000000..d1d4a44933
--- /dev/null
+++ b/packages/docs-examples/components/inline-edit/inline-edit-select-basic/inline-edit-select-basic-example.ts
@@ -0,0 +1,105 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { KbqOptionModule } from '@koobiq/components/core';
+import { KbqDlModule } from '@koobiq/components/dl';
+import { KbqFormFieldModule, KbqLabel } from '@koobiq/components/form-field';
+import { KbqInlineEditModule } from '@koobiq/components/inline-edit';
+import { KbqSelectModule } from '@koobiq/components/select';
+
+const STATUSES: string[] = ['Open', 'In progress', 'Resolved', 'Closed'];
+const PRIORITIES: string[] = ['Low', 'Medium', 'High', 'Critical'];
+
+/**
+ * @title Inline edit select basic
+ */
+@Component({
+ selector: 'inline-edit-select-basic-example',
+ imports: [
+ ReactiveFormsModule,
+ KbqInlineEditModule,
+ KbqFormFieldModule,
+ KbqLabel,
+ KbqOptionModule,
+ KbqSelectModule,
+ KbqDlModule
+ ],
+ template: `
+
+
+ Status
+
+
+ @if (status.value) {
+ {{ status.value }}
+ } @else {
+ {{ notSetLabel }}
+ }
+
+
+
+
+ @for (item of statuses; track item) {
+ {{ item }}
+ }
+
+
+
+
+ @if (priority.value) {
+ {{ priority.value }}
+ } @else {
+ {{ notSetLabel }}
+ }
+
+
+
+
+ @for (item of priorities; track item) {
+ {{ item }}
+ }
+
+
+
+
+
+ `,
+ styles: `
+ .example__section {
+ width: 200px;
+ }
+
+ .kbq-dt {
+ display: inline-flex;
+ align-items: center;
+ }
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ host: {
+ class: 'layout-column layout-align-center-center layout-gap-l'
+ }
+})
+export class InlineEditSelectBasicExample {
+ protected readonly notSetLabel = 'Not specified';
+
+ protected readonly statuses = STATUSES;
+ protected readonly priorities = PRIORITIES;
+
+ protected readonly status = new FormControl(STATUSES[0]);
+ protected readonly priority = new FormControl(PRIORITIES[0]);
+}
diff --git a/packages/docs-examples/components/inline-edit/inline-edit-select-multiline/inline-edit-select-multiline-example.ts b/packages/docs-examples/components/inline-edit/inline-edit-select-multiline/inline-edit-select-multiline-example.ts
new file mode 100644
index 0000000000..4e31ef0fb2
--- /dev/null
+++ b/packages/docs-examples/components/inline-edit/inline-edit-select-multiline/inline-edit-select-multiline-example.ts
@@ -0,0 +1,77 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { KbqOptionModule } from '@koobiq/components/core';
+import { KbqFormFieldModule, KbqLabel } from '@koobiq/components/form-field';
+import { KbqInlineEditModule } from '@koobiq/components/inline-edit';
+import { KbqSelectModule } from '@koobiq/components/select';
+
+const COMMENTS: string[] = [
+ 'Issue resolved after restarting the affected service. No further action required.',
+ 'Root cause identified as a misconfigured environment variable, fixed and redeployed.',
+ 'Duplicate of an existing issue, closing without further changes.',
+ 'Waiting on additional information from the reporter before further diagnosis.'
+];
+
+/**
+ * @title Inline edit select multiline
+ */
+@Component({
+ selector: 'inline-edit-select-multiline-example',
+ imports: [
+ ReactiveFormsModule,
+ KbqInlineEditModule,
+ KbqFormFieldModule,
+ KbqLabel,
+ KbqOptionModule,
+ KbqSelectModule
+ ],
+ template: `
+
+
+ Resolution comment
+
+
+ @if (control.value) {
+ {{ control.value }}
+ } @else {
+ {{ notSetLabel }}
+ }
+
+
+
+
+
+ {{ notSetLabel }}
+
+ @for (comment of comments; track comment) {
+ {{ comment }}
+ }
+
+
+
+
+
+ Assignee
+
+
+ @if (control.value) {
+
+ } @else {
+ {{ notSetLabel }}
+ }
+
+
+
+
+ {{ notSetLabel }}
+
+ @for (user of users; track user) {
+
+
+
+ }
+
+
+
+