DateBox: remove overflow:hidden for overlay content in Material (T1312677) (#31750)

Co-authored-by: Ruslan Farkhutdinov <[email protected]>

Author: r-farkhutdinov

e2e/testcafe-devextreme/tests/editors/button/etalons/FAB with one speed dial action button,label='Add Row',icon='home' (material-blue-light).png

@@ -1,5 +1,6 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DateBox from 'devextreme-testcafe-models/dateBox';
+import { Selector } from 'testcafe';
 import url from '../../../helpers/getPageUrl';
 import asyncForEach from '../../../helpers/asyncForEach';
 import { createWidget } from '../../../helpers/createWidget';
@@ -11,6 +12,9 @@ fixture.disablePageReloads`DateBox`
 const TIME_TO_WAIT = 1500;
 const ITEM_HEIGHT = 40;
 
+const TIME_VIEW_FIELD_CLASS = 'dx-timeview-field';
+const SELECT_BOX_CONTAINER_CLASS = 'dx-selectbox-container';
+
 if (!isMaterialBased()) {
   [[11, 12, 1925], [10, 23, 2001]].forEach(([month, day, year]) => {
     test(`Rollers should be scrolled correctly when value is changed to ${day}/${month}/${year} using kbn and valueChangeEvent=keyup (T948310)`, async (t) => {
@@ -71,3 +75,31 @@ test('DateBox with datetime and root element as container (T1193495)', async (t)
     container: '#container',
   },
 }, '#container'));
+
+test('DateBox with datetime and opened AM/PM select (T1312677)', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const timeViewSelect = Selector(`#container .${TIME_VIEW_FIELD_CLASS} .${SELECT_BOX_CONTAINER_CLASS}`);
+
+  await t
+    .click(timeViewSelect);
+
+  await testScreenshot(
+    t,
+    takeScreenshot,
+    'DateBox with datetime and opened AMPM select.png',
+    { element: '#container' },
+  );
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDateBox', {
+  value: new Date(2022, 10, 23, 17, 23),
+  type: 'datetime',
+  pickerType: 'calendar',
+  opened: true,
+  dropDownOptions: {
+    container: '#container',
+  },
+}, '#container'));