fix: do not open the field on helper element click (#269)

cherry pick of vaadin/web-components#2232 for v14

Fixes vaadin/flow-components#955

src/vaadin-select.html

@@ -378,7 +378,12 @@
           this._nativeInput.setAttribute('tabindex', -1);
           this._nativeInput.style.pointerEvents = 'none';
 
-          this.focusElement.addEventListener('click', e => this.opened = !this.readonly);
+          this.focusElement.addEventListener('click', (e) => {
+            const isHelperClick = Array.from(e.composedPath()).some((node) => {
+              return node.nodeType === Node.ELEMENT_NODE && node.getAttribute('slot') === 'helper';
+            });
+            this.opened = !this.readonly && !isHelperClick;
+          });
           this.focusElement.addEventListener('keydown', e => this._onKeyDown(e));
 
           this._observer = new Polymer.FlattenedNodesObserver(this, info => this._setTemplateFromNodes(info.addedNodes));

test/select-test.html

@@ -140,6 +140,10 @@
   <test-fixture id="select-with-slotted-helper">
     <template>
       <vaadin-select>
+        <template>
+          <vaadin-list-box>
+          </vaadin-list-box>
+        </template>
         <div slot="helper">foo</div>
       </vaadin-select>
     </template>
@@ -740,6 +744,15 @@
           select.helperText = 'Foo';
           expect(select._inputElement.helperText).to.equal(select.helperText);
         });
+
+        it('should not open select after helper click', () => {
+          const select = fixture('select-with-slotted-helper');
+          const helper = select.querySelector('[slot="helper"]');
+
+          helper.click();
+
+          expect(select.hasAttribute('opened')).to.be.false;
+        });
       });
 
       describe('validation', () => {