AdvancedTable focus bug fix

.changeset/whole-crabs-lay.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`AdvancedTable` - Fixed an issue where clicking a cell scrolled the page to center that cell

packages/components/src/components/hds/advanced-table/td.gts

@@ -42,6 +42,7 @@ export interface HdsAdvancedTableTdSignature {
 
 export default class HdsAdvancedTableTd extends Component<HdsAdvancedTableTdSignature> {
   @tracked private _shouldTrapFocus = false;
+
   private _element!: HTMLDivElement;
 
   // rowspan and colspan have to return 'auto' if not defined because otherwise the style modifier sets grid-area: undefined on the cell, which breaks the grid styles
@@ -121,7 +122,7 @@ export default class HdsAdvancedTableTd extends Component<HdsAdvancedTableTdSign
         )
       }}
       {{@compositeItem disabled=@isCompositeItemDisabled}}
-      {{hdsScrollIntoViewOnFocus options=(hash block="center" inline="center")}}
+      {{hdsScrollIntoViewOnFocus}}
       ...attributes
     >
       {{yield}}

packages/components/src/components/hds/advanced-table/th.gts

@@ -468,7 +468,7 @@ export default class HdsAdvancedTableTh extends Component<HdsAdvancedTableThSign
         )
       }}
       {{@compositeItem disabled=@isCompositeItemDisabled}}
-      {{hdsScrollIntoViewOnFocus options=(hash block="center" inline="center")}}
+      {{hdsScrollIntoViewOnFocus}}
       ...attributes
     >
       <HdsLayoutFlex @justify="space-between" @align="center" @gap="8">

showcase/tests/integration/components/hds/advanced-table/td-test.gts

@@ -3,8 +3,9 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
+import sinon from 'sinon';
 import { module, test } from 'qunit';
-import { render } from '@ember/test-helpers';
+import { focus, render } from '@ember/test-helpers';
 
 import { HdsAdvancedTableTd } from '@hashicorp/design-system-components/components';
 
@@ -92,4 +93,26 @@ module('Integration | Component | hds/advanced-table/td', function (hooks) {
     );
     assert.dom('#data-test-advanced-table-td').hasAttribute('lang', 'es');
   });
+
+  test('it should scroll into view on focus using the minimum scroll distance', async function (assert) {
+    const stub = sinon.stub(HTMLElement.prototype, 'scrollIntoView');
+
+    try {
+      await render(
+        <template>
+          <HdsAdvancedTableTd id="data-test-advanced-table-td" tabindex="0" />
+        </template>,
+      );
+
+      await focus('#data-test-advanced-table-td');
+
+      assert.ok(stub.calledOnce, 'scrollIntoView should be called once');
+
+      assert.deepEqual(stub.firstCall.args, [
+        { block: 'nearest', inline: 'nearest' },
+      ]);
+    } finally {
+      stub.restore();
+    }
+  });
 });

showcase/tests/integration/components/hds/advanced-table/th-test.gts

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
+import sinon from 'sinon';
 import { hash } from '@ember/helper';
 import { module, test } from 'qunit';
 import { render, focus, click, setupOnerror, find } from '@ember/test-helpers';
@@ -531,4 +532,28 @@ module('Integration | Component | hds/advanced-table/th', function (hooks) {
     );
     assert.ok(isClicked);
   });
+
+  test('it should scroll into view on focus using the minimum scroll distance', async function (assert) {
+    const stub = sinon.stub(HTMLElement.prototype, 'scrollIntoView');
+
+    try {
+      await render(
+        <template>
+          <HdsAdvancedTableTh id="data-test-advanced-table-th" tabindex="0">
+            Artist
+          </HdsAdvancedTableTh>
+        </template>,
+      );
+
+      await focus('#data-test-advanced-table-th');
+
+      assert.ok(stub.calledOnce, 'scrollIntoView should be called once');
+
+      assert.deepEqual(stub.firstCall.args, [
+        { block: 'nearest', inline: 'nearest' },
+      ]);
+    } finally {
+      stub.restore();
+    }
+  });
 });