DropDownEditor: remove overflow:hidden for overlay content (T1312677) (#31737)

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

Author: r-farkhutdinov

e2e/testcafe-devextreme/tests/editors/dateBox/dateBox.ts

@@ -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';
@@ -10,6 +11,9 @@ fixture.disablePageReloads`DateBox`
 
 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) => {
@@ -66,3 +70,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'));

e2e/testcafe-devextreme/tests/editors/dateBox/etalons/DateBox with datetime and opened AMPM select (fluent.blue.light).png

@@ -123,7 +123,7 @@ $fluent-dropdowneditor-invalid-badge-size: $fluent-invalid-badge-size + $fluent-
   &.dx-popup-wrapper {
     .dx-overlay-content {
       box-shadow: $fluent-base-dropdown-widgets-shadow;
-      overflow: hidden;
+      overflow: visible;
     }
   }
 

packages/devextreme-scss/scss/widgets/fluent/dropDownEditor/_index.scss

@@ -123,7 +123,7 @@ $material-dropdowneditor-invalid-badge-size: $material-invalid-badge-size + $mat
   &.dx-popup-wrapper {
     .dx-overlay-content {
       box-shadow: $material-base-dropdown-widgets-shadow;
-      overflow: hidden;
+      overflow: visible;
     }
   }