Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit edcb939

Browse files
authored
feat(text-field): Add focus API to component (#4020)
1 parent 2645aa4 commit edcb939

File tree

3 files changed

+17
-0
lines changed

3 files changed

+17
-0
lines changed

packages/mdc-textfield/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -254,6 +254,7 @@ In addition to the above, the following properties proxy to the `input` element'
254254

255255
Method Signature | Description
256256
--- | ---
257+
`focus() => void` | Focuses the `input` or `textarea` element.
257258
`layout() => void` | Adjusts the dimensions and positions for all sub-elements.
258259

259260
## Usage Within Frameworks

packages/mdc-textfield/index.js

+7
Original file line numberDiff line numberDiff line change
@@ -369,6 +369,13 @@ class MDCTextField extends MDCComponent {
369369
this.foundation_.setUseNativeValidation(useNativeValidation);
370370
}
371371

372+
/**
373+
* Focuses the input element.
374+
*/
375+
focus() {
376+
this.input_.focus();
377+
}
378+
372379
/**
373380
* Recomputes the outline SVG path for the outline element.
374381
*/

test/unit/mdc-textfield/mdc-text-field.test.js

+9
Original file line numberDiff line numberDiff line change
@@ -270,6 +270,15 @@ test('#initialSyncWithDom sets disabled if input element is not disabled', () =>
270270
assert.isNotOk(component.disabled);
271271
});
272272

273+
test('#focus calls focus on the input element', () => {
274+
const {root, component} = setupTest();
275+
const input = root.querySelector('.mdc-text-field__input');
276+
input.focus = td.func('focus');
277+
component.focus();
278+
279+
td.verify(input.focus(), {times: 1});
280+
});
281+
273282
test('get/set disabled updates the input element', () => {
274283
const {root, component} = setupTest();
275284
const input = root.querySelector('.mdc-text-field__input');

0 commit comments

Comments
 (0)