Skip to content

Commit 8e65674

Browse files
marker-daomarker dao ®
andauthored
DropDownEditor, Overlay: Clean links to elements on dispose and clean (T1311876) (#31788)
Co-authored-by: marker dao ® <[email protected]>
1 parent d31f95e commit 8e65674

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+738
-257
lines changed

packages/devextreme/js/__internal/core/m_events_strategy.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,5 +70,7 @@ export class EventsStrategy {
7070
each(this._events, (eventName, event) => {
7171
event.empty();
7272
});
73+
74+
this._owner = null;
7375
}
7476
}

packages/devextreme/js/__internal/core/widget/widget.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -366,7 +366,7 @@ class Widget<
366366
_toggleFocusClass(isFocused: boolean, $element?: dxElementWrapper): void {
367367
const $focusTarget = $element?.length ? $element : this._focusTarget();
368368

369-
$focusTarget.toggleClass(FOCUSED_STATE_CLASS, isFocused);
369+
$focusTarget?.toggleClass(FOCUSED_STATE_CLASS, isFocused);
370370
}
371371

372372
_hasFocusClass(element?: dxElementWrapper): boolean {
@@ -441,7 +441,7 @@ class Widget<
441441
_cleanFocusState(): void {
442442
const $element = this._focusTarget();
443443

444-
$element.removeAttr('tabIndex');
444+
$element?.removeAttr('tabIndex');
445445
this._toggleFocusClass(false);
446446
this._detachFocusEvents();
447447
this._detachKeyboardEvents();

packages/devextreme/js/__internal/ui/action_sheet.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ class ActionSheet extends CollectionWidget<Properties> {
146146

147147
_renderPopupTitle(): void {
148148
this._mapPopupOption('showTitle');
149-
this._popup?.$wrapper().toggleClass(ACTION_SHEET_WITHOUT_TITLE_CLASS, !this.option('showTitle'));
149+
this._popup?.$wrapper()?.toggleClass(ACTION_SHEET_WITHOUT_TITLE_CLASS, !this.option('showTitle'));
150150
}
151151

152152
_clean(): void {
@@ -184,7 +184,7 @@ class ActionSheet extends CollectionWidget<Properties> {
184184

185185
this._popup.$overlayContent().attr('role', 'dialog');
186186

187-
this._popup.$wrapper().addClass(ACTION_SHEET_POPOVER_WRAPPER_CLASS);
187+
this._popup.$wrapper()?.addClass(ACTION_SHEET_POPOVER_WRAPPER_CLASS);
188188
}
189189

190190
_createPopup(): void {
@@ -238,11 +238,11 @@ class ActionSheet extends CollectionWidget<Properties> {
238238
},
239239
}));
240240

241-
this._popup.$wrapper().addClass(ACTION_SHEET_POPUP_WRAPPER_CLASS);
241+
this._popup.$wrapper()?.addClass(ACTION_SHEET_POPUP_WRAPPER_CLASS);
242242
}
243243

244244
_popupContentReadyAction(): void {
245-
this._popup.$content().append(this._$itemContainer);
245+
this._popup.$content()?.append(this._$itemContainer);
246246
this._attachClickEvent();
247247
this._attachHoldEvent();
248248

@@ -265,10 +265,15 @@ class ActionSheet extends CollectionWidget<Properties> {
265265

266266
if (showCancelButton) {
267267
const cancelClickAction = this._createActionByOption('onCancelClick') || noop;
268+
const $content = this._popup?.$content();
269+
270+
if (!$content) {
271+
return;
272+
}
268273

269274
this._$cancelButton = $('<div>')
270275
.addClass(ACTION_SHEET_CANCEL_BUTTON_CLASS)
271-
.appendTo(this._popup?.$content());
276+
.appendTo($content);
272277

273278
this._createComponent<Button, ButtonProperties>(this._$cancelButton, Button, {
274279
disabled: false,

packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -590,7 +590,7 @@ class CollectionWidget<
590590
return shouldSkipRefreshId;
591591
}
592592

593-
_refreshActiveDescendant($target?: dxElementWrapper): void {
593+
_refreshActiveDescendant($target?: dxElementWrapper | null): void {
594594
const { focusedElement } = this.option();
595595

596596
if (isDefined(focusedElement)) {

packages/devextreme/js/__internal/ui/color_box/m_color_box.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,13 @@ class ColorBox extends DropDownEditor<ColorBoxProperties> {
153153
_createColorView(): void {
154154
this._popup.$overlayContent().addClass(COLOR_BOX_OVERLAY_CLASS);
155155

156-
const $colorView = $('<div>').appendTo(this._popup.$content());
156+
const $content = this._popup.$content();
157+
158+
if (!$content) {
159+
return;
160+
}
161+
162+
const $colorView = $('<div>').appendTo($content);
157163

158164
this._colorView = this._createComponent($colorView, ColorView, this._colorViewConfig());
159165
}

packages/devextreme/js/__internal/ui/context_menu/context_menu.ts

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ class ContextMenu<
231231
_focusInHandler(): void {}
232232

233233
_itemContainer(): dxElementWrapper {
234-
return this._overlay ? this._overlay.$content() : $();
234+
return this._overlay?.$content() ?? $();
235235
}
236236

237237
_eventBindingTarget(): dxElementWrapper {
@@ -486,6 +486,11 @@ class ContextMenu<
486486
this._overlay = this._createComponent($('<div>').appendTo(this.$element()), Overlay, overlayOptions);
487487

488488
const $overlayContent = this._overlay.$content();
489+
490+
if (!$overlayContent) {
491+
return;
492+
}
493+
489494
$overlayContent.addClass(DX_CONTEXT_MENU_CLASS);
490495

491496
this._addCustomCssClass($overlayContent);
@@ -742,7 +747,7 @@ class ContextMenu<
742747
}
743748

744749
_getItemsContainers(): dxElementWrapper {
745-
return this._overlay?.$content().find(`.${DX_MENU_ITEMS_CONTAINER_CLASS}`) ?? $();
750+
return this._overlay?.$content()?.find(`.${DX_MENU_ITEMS_CONTAINER_CLASS}`) ?? $();
746751
}
747752

748753
_searchActiveItem(target: Element): dxElementWrapper {
@@ -1082,7 +1087,7 @@ class ContextMenu<
10821087

10831088
_hideAllShownSubmenus(): void {
10841089
const shownSubmenus = extend([], this._shownSubmenus);
1085-
const $expandedItems = this._overlay?.$content().find(`.${DX_MENU_ITEM_EXPANDED_CLASS}`) ?? $();
1090+
const $expandedItems = this._overlay?.$content()?.find(`.${DX_MENU_ITEM_EXPANDED_CLASS}`) ?? $();
10861091

10871092
$expandedItems.removeClass(DX_MENU_ITEM_EXPANDED_CLASS);
10881093

@@ -1159,7 +1164,7 @@ class ContextMenu<
11591164
if (position) {
11601165
if (!this._overlay) {
11611166
this._renderContextMenuOverlay();
1162-
(this._overlay as unknown as Overlay).$content().addClass(this._widgetClass());
1167+
(this._overlay as unknown as Overlay).$content()?.addClass(this._widgetClass());
11631168
this._renderFocusState();
11641169
this._attachHoverEvents();
11651170
this._attachClickEvent();

packages/devextreme/js/__internal/ui/date_box/m_date_box.base.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -377,7 +377,7 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
377377

378378
_renderPopup(): void {
379379
super._renderPopup();
380-
this._popup?.$wrapper().addClass(DATEBOX_WRAPPER_CLASS);
380+
this._popup?.$wrapper()?.addClass(DATEBOX_WRAPPER_CLASS);
381381
this._renderPopupWrapper();
382382
}
383383

@@ -411,7 +411,7 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
411411
const { type } = this.option();
412412

413413
this._popup.$wrapper()
414-
.addClass(`${DATEBOX_WRAPPER_CLASS}-${type}`)
414+
?.addClass(`${DATEBOX_WRAPPER_CLASS}-${type}`)
415415
.addClass(`${DATEBOX_WRAPPER_CLASS}-${this._pickerType}`)
416416
.addClass(DROPDOWNEDITOR_OVERLAY_CLASS);
417417
}

packages/devextreme/js/__internal/ui/diagram/ui.diagram.dialogs.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ class DiagramDialog extends Widget<Properties> {
148148
}
149149

150150
_show(): void {
151-
this._popup?.$content().empty().append(this._onGetContentAction());
151+
this._popup?.$content()?.empty().append(this._onGetContentAction());
152152
// eslint-disable-next-line @typescript-eslint/no-floating-promises
153153
this._popup?.show();
154154
this._isShown = true;

packages/devextreme/js/__internal/ui/dialog.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ export const custom = (params: DialogParams): BaseDialog => {
121121
const component = e.component as Popup;
122122

123123
component.$content()
124-
.addClass(DX_DIALOG_CONTENT_CLASSNAME)
124+
?.addClass(DX_DIALOG_CONTENT_CLASSNAME)
125125
.append($message);
126126

127127
if (messageId) {
@@ -264,7 +264,7 @@ export const custom = (params: DialogParams): BaseDialog => {
264264
popupInstance = new Popup($element, options);
265265

266266
popupInstance.$wrapper()
267-
.addClass(DX_DIALOG_WRAPPER_CLASSNAME)
267+
?.addClass(DX_DIALOG_WRAPPER_CLASSNAME)
268268
.addClass(DX_DIALOG_ROOT_CLASSNAME);
269269

270270
const dialog: BaseDialog = {

packages/devextreme/js/__internal/ui/drawer/drawer.rendering.strategy.overlap.ts

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -180,18 +180,21 @@ class OverlapStrategy extends DrawerStrategy {
180180
});
181181
} else if (revealMode === 'expand') {
182182
this._initialPosition = drawer.isHorizontalDirection() ? { left: 0 } : { top: 0 };
183-
move($panelOverlayContent, this._initialPosition);
184183

185-
animation.size({
186-
complete: () => {
187-
whenAnimationCompleted?.resolve();
188-
},
189-
duration: animationDuration,
190-
direction: targetPanelPosition,
191-
$element: $panelOverlayContent,
192-
size: panelSize,
193-
marginTop,
194-
});
184+
if ($panelOverlayContent) {
185+
move($panelOverlayContent, this._initialPosition);
186+
187+
animation.size({
188+
complete: () => {
189+
whenAnimationCompleted?.resolve();
190+
},
191+
duration: animationDuration,
192+
direction: targetPanelPosition,
193+
$element: $panelOverlayContent,
194+
size: panelSize,
195+
marginTop,
196+
});
197+
}
195198
}
196199
} else if (revealMode === 'slide') {
197200
this._initialPosition = drawer.isHorizontalDirection()
@@ -200,7 +203,11 @@ class OverlapStrategy extends DrawerStrategy {
200203
move($panel, this._initialPosition);
201204
} else if (revealMode === 'expand') {
202205
this._initialPosition = drawer.isHorizontalDirection() ? { left: 0 } : { top: 0 };
203-
move($panelOverlayContent, this._initialPosition);
206+
207+
if ($panelOverlayContent) {
208+
move($panelOverlayContent, this._initialPosition);
209+
}
210+
204211
if (drawer.isHorizontalDirection()) {
205212
$($panelOverlayContent).css('width', panelSize);
206213
} else {

0 commit comments

Comments
 (0)