Skip to content

Commit 7df5f69

Browse files
authored
Scheduler: width, maxWidth editing.popup not working (#31835)
1 parent c4851b0 commit 7df5f69

File tree

2 files changed

+90
-5
lines changed

2 files changed

+90
-5
lines changed

packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2182,6 +2182,76 @@ describe('Appointment Popup', () => {
21822182

21832183
expect(POM.isPopupVisible()).toBe(true);
21842184
});
2185+
2186+
describe('Popup width and maxWidth options', () => {
2187+
// Mock window width to avoid fullscreen mode
2188+
beforeEach(() => {
2189+
Object.defineProperty(document.documentElement, 'clientWidth', {
2190+
value: 1280,
2191+
});
2192+
});
2193+
2194+
it('should use custom maxWidth when specified', async () => {
2195+
const { scheduler, POM } = await createScheduler({
2196+
...getDefaultConfig(),
2197+
editing: {
2198+
allowAdding: true,
2199+
allowUpdating: true,
2200+
popup: {
2201+
maxWidth: 500,
2202+
},
2203+
},
2204+
});
2205+
2206+
scheduler.showAppointmentPopup(commonAppointment);
2207+
2208+
const maxWidth = POM.popup.component.option('maxWidth');
2209+
expect(maxWidth).toBe(500);
2210+
});
2211+
2212+
it('should use custom width as maxWidth when maxWidth is not specified', async () => {
2213+
const { scheduler, POM } = await createScheduler({
2214+
...getDefaultConfig(),
2215+
editing: {
2216+
allowAdding: true,
2217+
allowUpdating: true,
2218+
popup: {
2219+
width: 600,
2220+
},
2221+
},
2222+
});
2223+
2224+
scheduler.showAppointmentPopup(commonAppointment);
2225+
2226+
const width = POM.popup.component.option('width');
2227+
expect(width).toBe(600);
2228+
2229+
const maxWidth = POM.popup.component.option('maxWidth');
2230+
expect(maxWidth).toBe(600);
2231+
});
2232+
2233+
it('should use maxWidth option value (not width) for maxWidth when both maxWidth and width are specified', async () => {
2234+
const { scheduler, POM } = await createScheduler({
2235+
...getDefaultConfig(),
2236+
editing: {
2237+
allowAdding: true,
2238+
allowUpdating: true,
2239+
popup: {
2240+
width: 600,
2241+
maxWidth: 500,
2242+
},
2243+
},
2244+
});
2245+
2246+
scheduler.showAppointmentPopup(commonAppointment);
2247+
2248+
const width = POM.popup.component.option('width');
2249+
expect(width).toBe(600);
2250+
2251+
const maxWidth = POM.popup.component.option('maxWidth');
2252+
expect(maxWidth).toBe(500);
2253+
});
2254+
});
21852255
});
21862256
});
21872257

packages/devextreme/js/__internal/scheduler/appointment_popup/m_popup.ts

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export class AppointmentPopup {
3737

3838
private _popup?: dxPopup;
3939

40-
private customToolbarItems?: ToolbarItem[];
40+
private customPopupOptions?: PopupProperties;
4141

4242
state: any;
4343

@@ -99,7 +99,7 @@ export class AppointmentPopup {
9999
const editingConfig = this.scheduler.getEditingConfig();
100100
const customPopupOptions = editingConfig?.popup ?? {};
101101

102-
this.customToolbarItems = customPopupOptions.toolbarItems;
102+
this.customPopupOptions = customPopupOptions;
103103

104104
const defaultPopupConfig = {
105105
height: 'auto',
@@ -221,6 +221,16 @@ export class AppointmentPopup {
221221
}
222222
}
223223

224+
getMaxWidth(): number | string {
225+
if (this.customPopupOptions?.maxWidth !== undefined) {
226+
return this.customPopupOptions.maxWidth;
227+
}
228+
if (this.customPopupOptions?.width !== undefined) {
229+
return this.customPopupOptions.width;
230+
}
231+
return isFluent(current()) ? 380 : 420;
232+
}
233+
224234
updatePopupFullScreenMode(): void {
225235
if (this.visible) {
226236
const isPopupFullScreenNeeded = () => {
@@ -231,9 +241,14 @@ export class AppointmentPopup {
231241
};
232242

233243
const isFullScreen = isPopupFullScreenNeeded();
234-
const maxWidth = isFluent(current()) ? 380 : 420;
235244

236245
this.popup.option('fullScreen', isFullScreen);
246+
247+
if (this.customPopupOptions?.width !== undefined) {
248+
this.popup.option('width', this.customPopupOptions.width);
249+
}
250+
251+
const maxWidth = this.getMaxWidth();
237252
this.popup.option('maxWidth', isFullScreen ? '100%' : maxWidth);
238253
}
239254
}
@@ -379,8 +394,8 @@ export class AppointmentPopup {
379394
}
380395

381396
private tryApplyCustomToolbarItems(): boolean {
382-
if (this.customToolbarItems) {
383-
this.popup.option('toolbarItems', this.customToolbarItems);
397+
if (this.customPopupOptions?.toolbarItems) {
398+
this.popup.option('toolbarItems', this.customPopupOptions.toolbarItems);
384399
return true;
385400
}
386401
return false;

0 commit comments

Comments
 (0)