feat: add a method to programatically focus and open the dropdown ele…

…ment (#867)

* feat: add a method to programatically focus and open the dropdown element

* test: adds missing test for focuselement method

* fix: fix typo in method description

* fix: add missing folder to CODE_STYLE url in CONTRIBUTING doc

docs/CONTRIBUTING.md

@@ -21,7 +21,7 @@
 - **Code Review Process**: We will review your PR and provide feedback. Once the PR is ready for merge, it will be merged by the maintainers.
 
 ## Style Guides
-- **Code Style**: Please read our [Code Style](/~https://github.com/scania-digital-design-system/tegel/blob/main/CODE_STYLE.md) before contributing.
+- **Code Style**: Please read our [Code Style](/~https://github.com/scania-digital-design-system/tegel/blob/main/.github/CODE_STYLE.md) before contributing.
 
 ## Testing your changes locally
 To properly test your changes' behaviors in a project, reference your local Tegel instance instead of the published version on the registry

packages/core/src/components/dropdown/dropdown.tsx

@@ -92,6 +92,13 @@ export class TdsDropdown {
     this.handleChange();
   }
 
+  /** Method that forces focus on the input element. */
+  @Method()
+  async focusElement() {
+    this.focusInputElement();
+    this.handleFocus({});
+  }
+
   /** Method for setting the value of the Dropdown.
    *
    * Single selection example:
@@ -472,7 +479,13 @@ export class TdsDropdown {
   };
 
   private handleFocus = (event) => {
+    this.open = true;
+    this.filterFocus = true;
+    if (this.multiselect) {
+      this.inputElement.value = '';
+    }
     this.tdsFocus.emit(event);
+    this.handleFilter({ target: { value: '' } });
   };
 
   private handleBlur = (event) => {
@@ -542,15 +555,7 @@ export class TdsDropdown {
                     }
                     this.handleBlur(event);
                   }}
-                  onFocus={(event) => {
-                    this.open = true;
-                    this.filterFocus = true;
-                    if (this.multiselect) {
-                      this.inputElement.value = '';
-                    }
-                    this.handleFocus(event);
-                    this.handleFilter({ target: { value: '' } });
-                  }}
+                  onFocus={(event) => this.handleFocus(event)}
                   onKeyDown={(event) => {
                     if (event.key === 'Escape') {
                       this.open = false;

packages/core/src/components/dropdown/readme.md

@@ -49,6 +49,16 @@ Type: `Promise<void>`
 
 
 
+### `focusElement() => Promise<void>`
+
+Method that forces focus on the input element.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `removeValue(oldValue: string) => Promise<{ value: string; label: string; }[]>`
 
 Method for removing a selected value in the Dropdown.

packages/core/src/components/dropdown/test/default/dropdown.e2e.ts

@@ -93,4 +93,24 @@ test.describe.parallel('tds-dropdown-default', () => {
     await expect(dropdownButtonElement).toBeVisible();
     await expect(dropdownListElementTwoButton).toBeVisible();
   });
+  test('focusElement() method focus and opens the dropdown-list', async ({ page }) => {
+    await page.goto(componentTestPath);
+    const dropdownButton = page.getByRole('button').first();
+    const dropdownListElementOne = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: 'Option 1' });
+    await expect(dropdownListElementOne).toBeHidden();
+
+    await page.evaluate(() => {
+      const dropdownnew = document.querySelector('tds-dropdown');
+      dropdownnew.focusElement();
+    });
+
+    /* before clicking dropdownlist should not be visible, the button should be */
+    await expect(dropdownButton).toBeVisible();
+    await expect(dropdownListElementOne).toBeVisible();
+
+    /* checks diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
 });