feat(toggle-button): add setFocus method (#1005)

Co-authored-by: Arturo Castillo Delgado <[email protected]>
telekom · Apr 22, 2022 · 8754b66 · 8754b66
1 parent 4f5be31
commit 8754b66
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/packages/components/src/components/toggle-button/readme.md b/packages/components/src/components/toggle-button/readme.md
@@ -36,6 +36,19 @@
 | `scaleClick`  | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<{ id: string; selected: boolean; }>` |
 
 
+## Methods
+
+### `setFocus() => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/toggle-button/toggle-button.tsx b/packages/components/src/components/toggle-button/toggle-button.tsx
@@ -17,6 +17,7 @@ import {
   Element,
   Event,
   EventEmitter,
+  Method,
 } from '@stencil/core';
 import classNames from 'classnames';
 import { emitEvent } from '../../utils/utils';
@@ -86,6 +87,13 @@ export class ToggleButton {
 
   hasScaleIcon = false;
 
+  private focusableElement: HTMLElement;
+
+  @Method()
+  async setFocus() {
+    this.focusableElement.focus();
+  }
+
   connectedCallback() {
     this.setIconPositionProp();
     this.handleIconShape();
@@ -185,6 +193,7 @@ export class ToggleButton {
       <Host>
         {this.styles && <style>{this.styles}</style>}
         <button
+          ref={(el) => (this.focusableElement = el)}
           class={this.getCssClassMap()}
           id={this.toggleButtonId}
           onClick={this.handleClick}