fix: do not focus the field on helper element click

cherry pick of vaadin/web-components#2232 for v14 Fixes vaadin/flow-components#955
vaadin · Jul 21, 2021 · 640c7ce · 640c7ce
1 parent 24e8c66
commit 640c7ce
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/vaadin-custom-field.html b/src/vaadin-custom-field.html
@@ -44,7 +44,7 @@
       <div class="inputs-wrapper" on-change="__updateValue">
         <slot id="slot"></slot>
       </div>
-      <div part="helper-text" on-click="focus" id="[[__helperTextId]]">
+      <div part="helper-text" id="[[__helperTextId]]">
         <slot name="helper" id="helperSlot">[[helperText]]</slot>
       </div>
       <div part="error-message"

diff --git a/test/custom-field-basic-test.html b/test/custom-field-basic-test.html
@@ -194,6 +194,16 @@
 
           expect(customFieldWithSlottedHelper.hasAttribute('has-helper')).to.be.false;
         });
+
+        it('should not get focus after helper click', function() {
+          const field = fixture('default-with-slotted-helper');
+          const helper = field.querySelector('[slot="helper"]');
+          const spy = sinon.spy(field, 'focus');
+
+          helper.click();
+
+          expect(spy.called).to.be.false;
+        });
       });
 
       describe('aria-desribedby', function() {