feat: add setFocus method to button and link (#661)

* feat: add setFocus method to button (wip) * feat: add setFocus to link
telekom · Nov 3, 2021 · 94eb907 · 94eb907
1 parent a5ae8f4
commit 94eb907
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 3 deletions.
diff --git a/packages/components/src/components/button/button.tsx b/packages/components/src/components/button/button.tsx
@@ -9,7 +9,15 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Component, Prop, h, Host, Listen, Element } from '@stencil/core';
+import {
+  Component,
+  Prop,
+  h,
+  Host,
+  Listen,
+  Element,
+  Method,
+} from '@stencil/core';
 import classNames from 'classnames';
 import { hasShadowDom } from '../../utils/utils';
 
@@ -44,6 +52,8 @@ export class Button {
   /** (optional) name of a file to be downloaded */
   @Prop() download?: string;
 
+  private focusableElement: HTMLElement;
+
   /**
    * Prevent clicks from being emitted from the host
    * when the component is `disabled`.
@@ -55,6 +65,11 @@ export class Button {
     }
   }
 
+  @Method()
+  async setFocus() {
+    this.focusableElement.focus();
+  }
+
   /**
    * Hack to make the button behave has expected when inside forms.
    * @see https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/button/button.tsx#L155-L175
@@ -117,6 +132,7 @@ export class Button {
 
         {this.href ? (
           <a
+            ref={(el) => (this.focusableElement = el)}
             class={this.getCssClassMap()}
             href={this.href}
             download={this.download}
@@ -129,6 +145,7 @@ export class Button {
           </a>
         ) : (
           <button
+            ref={(el) => (this.focusableElement = el)}
             class={this.getCssClassMap()}
             onClick={this.handleClick}
             disabled={this.disabled}

diff --git a/packages/components/src/components/button/readme.md b/packages/components/src/components/button/readme.md
@@ -22,6 +22,19 @@
 | `variant`      | `variant`       | (optional) Button variant                                      | `string`                          | `'primary'` |
 
 
+## Methods
+
+### `setFocus() => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
 ## Dependencies
 
 ### Used by

diff --git a/packages/components/src/components/link/link.tsx b/packages/components/src/components/link/link.tsx
@@ -9,7 +9,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Component, h, Prop, Host } from '@stencil/core';
+import { Component, h, Prop, Host, Method } from '@stencil/core';
 
 /**
  * This is a superset of the default anchor `<a>` element.
@@ -52,6 +52,13 @@ export class Link {
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
 
+  private focusableElement: HTMLElement;
+
+  @Method()
+  async setFocus() {
+    this.focusableElement.focus();
+  }
+
   getAnchorProps() {
     const props = {
       href: this.href || null,
@@ -78,7 +85,11 @@ export class Link {
         }}
       >
         {this.styles && <style>{this.styles}</style>}
-        <a part="anchor" {...this.getAnchorProps()}>
+        <a
+          part="anchor"
+          ref={(el) => (this.focusableElement = el)}
+          {...this.getAnchorProps()}
+        >
           <div part="content">
             <slot />
           </div>

diff --git a/packages/components/src/components/link/readme.md b/packages/components/src/components/link/readme.md
@@ -71,6 +71,19 @@
 | `type`           | `type`           | (optional)                                                                                                                                                           | `string`                                                                                                                                                                                 | `undefined` |
 
 
+## Methods
+
+### `setFocus() => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
 ## Slots
 
 | Slot        | Description                                                          |