Merge branch 'main' into 8904-fileuploadadv-beforefileupload

docs/CHANGELOG.md

@@ -10,6 +10,8 @@
 
 ## v4.99.0 Fixes
 
+- `[Autocomplete]` Fixed a bug where autocomplete items are not shown when press key down. ([#8943](https://github.com/infor-design/enterprise-/issues/8943))
+- `[ContextualToolbar]` Fixed datagrid hover color for contextual toolbar when a row is selected. ([#8980](https://github.com/infor-design/enterprise-/issues/8980))
 - `[Datagrid]` Fixed a bug in compact mode where datagrid filters doesn't extend all throughout the parents width. ([#8900](https://github.com/infor-design/enterprise-/issues/8900))
 - `[Datagrid]` Fixed data return by select event on datagrid when having filter on. ([#8905](https://github.com/infor-design/enterprise/issues/8905))
 - `[Datagrid]` Optimize the initial loading of datagrids with filterable setting. ([#8935](https://github.com/infor-design/enterprise/issues/8935))

src/components/autocomplete/autocomplete.js

@@ -537,7 +537,7 @@ Autocomplete.prototype = {
     }
 
     function highlight(item) {
-      item.addClass('is-selected').find('a');
+      item.addClass('is-selected').find('a').focus();
     }
 
     const excludes = 'li:not(.separator):not(.hidden):not(.heading):not(.group):not(.is-disabled)';

src/components/button/_button.scss

@@ -888,7 +888,7 @@ a.btn-close {
   overflow: hidden;
 
   &:hover:not([disabled]):not(.btn-primary):not(.btn-secondary) {
-    background-color: $button-color-tertiary-hover-background-new !important;
+    background-color: $button-color-tertiary-hover-background-new;
     color: $button-color-tertiary-hover-text;
 
     .icon {

src/components/toolbar/_toolbar.scss

@@ -360,7 +360,7 @@ $toolbar-buttonset-height: 40px;
       }
 
       &:hover {
-        color: $contextual-toolbar-button-hover-color;
+        color: $contextual-toolbar-button-hover-color !important;
         background-color: rgba(0, 0, 0, .3) !important;
 
         .icon {

tests/autocomplete/autocomplete.spec.js

@@ -4,45 +4,71 @@ import { expect } from '@playwright/test';
 import { test } from '../base-fixture';
 
 test.describe('Autocomplete tests', () => {
-  const url = '/components/autocomplete/example-index.html';
+  test.describe('Autocomplete example tests', () => {
+    const url = '/components/autocomplete/example-index.html';
 
-  test.beforeEach(async ({ page }) => {
-    await page.goto(url);
-  });
+    test.beforeEach(async ({ page }) => {
+      await page.goto(url);
+    });
 
-  test.describe('general page checks', () => {
-    test('should have a title', async ({ page }) => {
-      await expect(page).toHaveTitle('IDS Enterprise');
+    test.describe('general page checks', () => {
+      test('should have a title', async ({ page }) => {
+        await expect(page).toHaveTitle('IDS Enterprise');
+      });
     });
-  });
 
-  test.describe('accessibility tests', () => {
-    test('should pass an Axe scan', async ({ page, browserName }) => {
-      if (browserName !== 'chromium') return;
-      const accessibilityScanResults = await new AxeBuilder({ page })
-        .disableRules(['meta-viewport', 'aria-required-attr'])
-        .exclude('[disabled]')
-        .analyze();
-      expect(accessibilityScanResults.violations).toEqual([]);
+    test.describe('accessibility tests', () => {
+      test('should pass an Axe scan', async ({ page, browserName }) => {
+        if (browserName !== 'chromium') return;
+        const accessibilityScanResults = await new AxeBuilder({ page })
+          .disableRules(['meta-viewport', 'aria-required-attr'])
+          .exclude('[disabled]')
+          .analyze();
+        expect(accessibilityScanResults.violations).toEqual([]);
+      });
     });
-  });
 
-  test.describe('snapshot tests', () => {
-    test('should match innerHTML snapshot', async ({ page, browserName }) => {
-      if (browserName !== 'chromium') return;
-      const html = await page.evaluate(() => {
-        const elem = document.querySelector('.autocomplete');
-        return elem?.outerHTML;
+    test.describe('snapshot tests', () => {
+      test('should match innerHTML snapshot', async ({ page, browserName }) => {
+        if (browserName !== 'chromium') return;
+        const html = await page.evaluate(() => {
+          const elem = document.querySelector('.autocomplete');
+          return elem?.outerHTML;
+        });
+        await expect(html).toMatchSnapshot('autocomplete-html');
+      });
+
+      test('should match the visual snapshot in percy', async ({ page, browserName }) => {
+        if (browserName !== 'chromium') return;
+        await percySnapshot(page, 'autocomplete-light');
       });
-      await expect(html).toMatchSnapshot('autocomplete-html');
     });
 
-    test('should match the visual snapshot in percy', async ({ page, browserName }) => {
-      if (browserName !== 'chromium') return;
-      await percySnapshot(page, 'autocomplete-light');
+    test.describe('functionality tests', () => {
     });
   });
 
-  test.describe('functionality tests', () => {
+  test.describe('Autocomplete long list tests', () => {
+    const url = '/components/autocomplete/example-contains.html';
+
+    test.beforeEach(async ({ page }) => {
+      await page.goto(url);
+    });
+
+    test.describe('use key down to scroll test', () => {
+      test('should scroll down properly', async ({ page }) => {
+        const val = 'a';
+        const input = page.locator('#autocomplete-default');
+
+        await input.click();
+        await input.fill(val);
+        await expect(page.locator('#autocomplete-list')).toBeVisible();
+        await page.keyboard.press('ArrowUp');
+        await page.keyboard.press('ArrowUp');
+
+        await expect(page.locator('#ac-list-option42')).toBeVisible();
+        await expect(page.locator('#ac-list-option42')).toHaveClass('is-selected');
+      });
+    });
   });
 });

tests/datagrid/datagrid.spec.js

@@ -102,4 +102,30 @@ test.describe('Datagrid tests', () => {
       });
     });
   });
+
+  test.describe('datagrid toolbar button tests', () => {
+    const url = '/components/datagrid/example-mixed-selection.html';
+
+    test.beforeEach(async ({ page }) => {
+      await page.goto(url);
+    });
+
+    test.describe('button hover tests', () => {
+      test('value should have a proper color', async ({ page }) => {
+        await page.evaluate('document.getElementsByClassName("datagrid-selection-checkbox")[0].click()');
+
+        await expect(page.locator('.contextual-toolbar > .buttonset > .btn')).toBeVisible();
+
+        const button = page.locator('.contextual-toolbar > .buttonset > .btn');
+        await button.hover();
+
+        // eslint-disable-next-line arrow-body-style
+        const color = await button.evaluate((el) => {
+          return window.getComputedStyle(el).getPropertyValue('background-color');
+        });
+
+        await expect(color).toBe('rgba(0, 0, 0, 0.3)');
+      });
+    });
+  });
 });