feat(text-field): expose focusElement() method (#908)

* feat(text-field): add focus method * feat(text-field): add focus method * feat(text-field): revert banner readme to previous commit * feat(text-field): revert icon readme to previous commit * feat(text-field): revert table header cell readme to previous commit * fix: call native focus method instead of dispatch event * feat(text-field): rename focusTextField to focusElement * ci: saving screenshots of failing tests (#964) * test: saving screenshots of failing tests * test: corrected output directory * test: fix output directory path * test: using artifacts upload v4 * test: reverting to older ubuntu version * test: lowering artifacts retention days * feat(text-field): add focus method * feat(text-field): add focus method * feat(text-field): revert banner readme to previous commit * feat(text-field): revert icon readme to previous commit * feat(text-field): revert table header cell readme to previous commit * fix: call native focus method instead of dispatch event * feat(text-field): rename focusTextField to focusElement --------- Co-authored-by: Johan Lundgren <[email protected]> Co-authored-by: Charles Krook <[email protected]>
scania-digital-design-system · Jan 16, 2025 · 1298756 · 1298756
1 parent febb7a5
commit 1298756
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 1 deletion.
diff --git a/packages/core/src/components/text-field/readme.md b/packages/core/src/components/text-field/readme.md
@@ -38,6 +38,19 @@
 | `tdsInput`  | Input event for the Text Field  | `CustomEvent<InputEvent>` |
 
 
+## Methods
+
+### `focusElement() => Promise<void>`
+
+Method to handle focus
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
 ## Slots
 
 | Slot       | Description                                                                                 |

diff --git a/packages/core/src/components/text-field/test/focus/index.html b/packages/core/src/components/text-field/test/focus/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Text Field - Focus</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link rel="stylesheet" href="../../../../../dist/tegel/tegel.css" />
+    <script type="module">
+      import { defineCustomElements } from '../../../../../loader/index.es2017.js';
+      defineCustomElements();
+    </script>
+  </head>
+
+  <body>
+    <tds-text-field
+      type="text"
+      size="lg"
+      state="default"
+      label="Label"
+      label-position="no label"
+      placeholder="Placeholder"
+    ></tds-text-field>
+  </body>
+</html>
diff --git a/packages/core/src/components/text-field/test/focus/text-field.e2e.ts b/packages/core/src/components/text-field/test/focus/text-field.e2e.ts
@@ -0,0 +1,53 @@
+import { expect } from '@playwright/test';
+import { test } from 'stencil-playwright';
+
+// Defined once for reuse
+const componentTestPath = 'src/components/text-field/test/focus/index.html';
+const textFieldSelector = 'tds-text-field';
+
+test.describe.parallel('TdsTextField - Focus', () => {
+  test.beforeEach(async ({ page }) => {
+    // Navigate to the component test page before each test
+    await page.goto(componentTestPath);
+  });
+
+  test('renders as expected when focused programmatically', async ({ page }) => {
+    const textField = page.locator(textFieldSelector);
+
+    // Ensure that the component is rendered and interactable
+    await expect(textField).toBeVisible();
+
+    // Trigger focus programmatically
+    await textField.evaluate((element: any) => element.focusElement());
+
+    // Wait for any visual changes due to the focus action to take effect
+    await page.waitForTimeout(100);
+
+    // Capture and compare the screenshot after the focus event has been triggered
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+
+  test('allows text to be entered after focus', async ({ page }) => {
+    const textField = page.locator(textFieldSelector);
+    const inputField = textField.locator('input');
+
+    // Ensure the component is visible and ready
+    await expect(textField).toBeVisible();
+
+    // Trigger focus programmatically
+    await textField.evaluate((element: any) => element.focusElement());
+
+    // Wait for any visual changes due to the focus action to take effect
+    await page.waitForTimeout(100);
+
+    // Type some text into the input field
+    const textToInput = 'Test text';
+    await inputField.fill(textToInput);
+
+    // Verify the input field has the correct value after typing
+    await expect(inputField).toHaveValue(textToInput);
+
+    // Take a screenshot of the rendered text
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});
diff --git a/...napshots/TdsTextField---Focus-allows-text-to-be-entered-after-focus-1-linux.png b/...napshots/TdsTextField---Focus-allows-text-to-be-entered-after-focus-1-linux.png
diff --git a/...TextField---Focus-renders-as-expected-when-focused-programmatically-1-linux.png b/...TextField---Focus-renders-as-expected-when-focused-programmatically-1-linux.png
diff --git a/packages/core/src/components/text-field/text-field.tsx b/packages/core/src/components/text-field/text-field.tsx
@@ -1,5 +1,5 @@
-import { Component, h, State, Prop, Event, EventEmitter, Element } from '@stencil/core';
 import hasSlot from '../../utils/hasSlot';
+import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';
 
 /**
  * @slot prefix - Slot for the prefix in the component.
@@ -130,6 +130,14 @@ export class TdsTextField {
     this.tdsBlur.emit(event);
   }
 
+  /** Method to handle focus */
+  @Method()
+  async focusElement() {
+    if (this.textInput) {
+      this.textInput.focus();
+    }
+  }
+
   render() {
     const usesPrefixSlot = hasSlot('prefix', this.host);
     const usesSuffixSlot = hasSlot('suffix', this.host);