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

Commit

Permalink
Project import generated by Copybara.
Browse files Browse the repository at this point in the history
PiperOrigin-RevId: 288775969
  • Loading branch information
material-web-copybara authored and asyncLiz committed Jan 14, 2020
1 parent d07c78d commit b337f99
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 4 deletions.
2 changes: 2 additions & 0 deletions packages/mdc-textfield/icon/foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,8 @@ export class MDCTextFieldIconFoundation extends MDCFoundation<MDCTextFieldIconAd
handleInteraction(evt: MouseEvent | KeyboardEvent) {
const isEnterKey = (evt as KeyboardEvent).key === 'Enter' || (evt as KeyboardEvent).keyCode === 13;
if (evt.type === 'click' || isEnterKey) {
evt.preventDefault(); // stop click from causing host label to focus
// input
this.adapter_.notifyIconAction();
}
}
Expand Down
24 changes: 20 additions & 4 deletions packages/mdc-textfield/test/component.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,12 @@ const {cssClasses} = MDCTextFieldFoundation;
const getFixture = () => {
const wrapper = document.createElement('div');
wrapper.innerHTML = `
<div class="mdc-text-field mdc-text-field--with-leading-icon">
<label class="mdc-text-field mdc-text-field--with-leading-icon">
<i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
<input type="text" class="mdc-text-field__input" id="my-text-field">
<label class="mdc-floating-label" for="my-text-field">My Label</label>
<input type="text" class="mdc-text-field__input" aria-labelledby="my-label">
<span class="mdc-floating-label" id="my-label">My Label</span>
<div class="mdc-line-ripple"></div>
</div>
</label>
`;
const el = wrapper.firstElementChild as HTMLElement;
wrapper.removeChild(el);
Expand Down Expand Up @@ -674,6 +674,22 @@ describe('MDCTextField', () => {
expect(lineRipple.setRippleCenter).toHaveBeenCalledWith(100);
});

it('should not focus input when clicking icon', () => {
const root = getFixture();
const icon = root.querySelector('.mdc-text-field__icon') as HTMLElement;
const component = new MDCTextField(root);
document.body.appendChild(root);
component.root_.click();
const input = (component as any).input_ as HTMLInputElement;
expect(document.activeElement).toBe(input, 'input should be focused');
input.blur();
expect(document.activeElement).not.toBe(input, 'ensure input was blurred');
icon.click();
expect(document.activeElement)
.not.toBe(input, 'input should not be focused');
document.body.removeChild(root);
});

function setupMockFoundationTest(root = getFixture()) {
const mockFoundation = createMockFoundation(MDCTextFieldFoundation);
const component = new MDCTextField(root, mockFoundation);
Expand Down

0 comments on commit b337f99

Please sign in to comment.