DateBox: timeview amPm popup should be inside dateBox popup content (T1300566)

Author: Zedwag

packages/devextreme/js/__internal/ui/date_box/m_time_view.ts

@@ -269,6 +269,9 @@ class TimeView extends Editor<TimeViewProperties> {
           time.setHours(newHours);
           this.option('value', time);
         },
+        dropDownOptions: {
+          container: this.$element(),
+        },
         value: this._getValue().getHours() >= 12 ? TIMEVIEW_FORMAT12_PM : TIMEVIEW_FORMAT12_AM,
         stylingMode: this.option('stylingMode'),
       },

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.tests.js

@@ -75,6 +75,7 @@ const CALENDAR_NAVIGATOR_PREVIOUS_VIEW_CLASS = 'dx-calendar-navigator-previous-v
 const DROPDOWNEDITOR_OVERLAY_CLASS = 'dx-dropdowneditor-overlay';
 const NUMBERBOX_CLASS = 'dx-numberbox';
 const NUMBERBOX_SPIN_DOWN_CLASS = 'dx-numberbox-spin-down';
+const SELECTBOX_CLASS = 'dx-selectbox';
 const SHOW_INVALID_BADGE_CLASS = 'dx-show-invalid-badge';
 
 const APPLY_BUTTON_SELECTOR = '.dx-popup-done.dx-button';
@@ -3250,9 +3251,9 @@ QUnit.module('datebox with time component', {
 
         dateBox.open();
 
-        const hourEditor = $('.dx-timeview-field .dx-numberbox').eq(0);
-        const minuteEditor = $('.dx-timeview-field .dx-numberbox').eq(1);
-        const amPmEditor = $('.dx-timeview-field .dx-selectbox').eq(0);
+        const hourEditor = $(`.${TIMEVIEW_CLASS} .${NUMBERBOX_CLASS}`).eq(0);
+        const minuteEditor = $(`.${TIMEVIEW_CLASS} .${NUMBERBOX_CLASS}`).eq(1);
+        const amPmEditor = $(`.${TIMEVIEW_CLASS} .${SELECTBOX_CLASS}`).eq(0);
 
         assert.ok(hourEditor.hasClass('dx-editor-outlined'));
         assert.ok(minuteEditor.hasClass('dx-editor-outlined'));
@@ -3271,15 +3272,32 @@ QUnit.module('datebox with time component', {
 
         dateBox.open();
 
-        const hourEditor = $('.dx-timeview-field .dx-numberbox').eq(0);
-        const minuteEditor = $('.dx-timeview-field .dx-numberbox').eq(1);
-        const amPmEditor = $('.dx-timeview-field .dx-selectbox').eq(0);
+        const hourEditor = $(`.${TIMEVIEW_CLASS} .${NUMBERBOX_CLASS}`).eq(0);
+        const minuteEditor = $(`.${TIMEVIEW_CLASS} .${NUMBERBOX_CLASS}`).eq(1);
+        const amPmEditor = $(`.${TIMEVIEW_CLASS} .${SELECTBOX_CLASS}`).eq(0);
 
         assert.ok(hourEditor.hasClass('dx-editor-underlined'));
         assert.ok(minuteEditor.hasClass('dx-editor-underlined'));
         assert.ok(amPmEditor.hasClass('dx-editor-underlined'));
     });
 
+    QUnit.test('DateBox with timeview should have amPm popup inside of dateBox popup content (T1300566)', function(assert) {
+        const dateBox = $('#dateBox').dxDateBox({
+            type: 'datetime',
+            pickerType: 'calendar',
+            opened: true,
+            displayFormat: 'ddMMyy hh:mm',
+        }).dxDateBox('instance');
+        const amPmEditor = $(`.${TIMEVIEW_CLASS} .${SELECTBOX_CLASS}`).eq(0).dxSelectBox('instance');
+
+        amPmEditor.open();
+
+        const $dateBoxPopup = $(dateBox.content());
+        const $amPmPopup = $(amPmEditor.content());
+
+        assert.strictEqual($amPmPopup.closest($dateBoxPopup).length, 1, 'amPm popup is inside dateBox popup');
+    });
+
     QUnit.test('Reset seconds and milliseconds when DateBox has no value for time view', function(assert) {
         const dateBox = $('#dateBox').dxDateBox({
             pickerType: 'list',

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/timeView.tests.js

@@ -332,6 +332,16 @@ QUnit.module('12 hours format', () => {
         assert.equal($element.find('.' + TIMEVIEW_FORMAT12_CLASS).length, 0, 'input was removed');
     });
 
+    QUnit.test('format selectBox should set timeView root as a dropDown container (T1300566)', function(assert) {
+        const $element = $('#timeView').dxTimeView({
+            use24HourFormat: false,
+        });
+        const formatSelectBox = $element.find(`.${TIMEVIEW_FORMAT12_CLASS}`).dxSelectBox('instance');
+        const $container = formatSelectBox.option('dropDownOptions.container');
+
+        assert.strictEqual($container.is($element), true);
+    });
+
     QUnit.test('timeView should use localized message for the 24hour format selectBox', function(assert) {
         const getPeriodNames = sinon.stub(dateLocalization, 'getPeriodNames').returns(['A', 'P']);