From 7f4320dbdfda188f7f6232fe3f72138da225a956 Mon Sep 17 00:00:00 2001
From: qa46hx <Gerjan.van.Geest@ing.com>
Date: Wed, 5 Feb 2020 13:14:50 +0100
Subject: [PATCH] fix(field): limit get label/help-text to childNodes

---
 packages/field/src/FormControlMixin.js       | 12 ++--------
 packages/field/test/FormControlMixin.test.js | 24 ++++++++++++++++++--
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/packages/field/src/FormControlMixin.js b/packages/field/src/FormControlMixin.js
index 1fd94e8ca..eef955a7f 100644
--- a/packages/field/src/FormControlMixin.js
+++ b/packages/field/src/FormControlMixin.js
@@ -54,11 +54,7 @@ export const FormControlMixin = dedupeMixin(
       }
 
       get label() {
-        return (
-          (this.querySelector('[slot="label"]') &&
-            this.querySelector('[slot="label"]').textContent) ||
-          this.__label
-        );
+        return (this._labelNode && this._labelNode.textContent) || this.__label;
       }
 
       set label(newValue) {
@@ -68,11 +64,7 @@ export const FormControlMixin = dedupeMixin(
       }
 
       get helpText() {
-        return (
-          (this.querySelector('[slot="help-text"]') &&
-            this.querySelector('[slot="help-text"]').textContent) ||
-          this.__helpText
-        );
+        return (this._helpTextNode && this._helpTextNode.textContent) || this.__helpText;
       }
 
       set helpText(newValue) {
diff --git a/packages/field/test/FormControlMixin.test.js b/packages/field/test/FormControlMixin.test.js
index 0325865c7..e6ea3d795 100644
--- a/packages/field/test/FormControlMixin.test.js
+++ b/packages/field/test/FormControlMixin.test.js
@@ -53,6 +53,16 @@ describe('FormControlMixin', () => {
     expect(el.label).to.equal('Email address');
   });
 
+  it('only takes label of direct child', async () => {
+    const el = await fixture(html`
+      <${tag}>
+        <${tag} label="Email address">
+          ${inputSlot}
+        </${tag}>
+      </${tag}>`);
+    expect(el.label).to.equal(undefined);
+  });
+
   it('can have a help-text', async () => {
     const elAttr = await fixture(html`
       <${tag} help-text="We will not send you any spam">${inputSlot}</${tag}>
@@ -68,7 +78,7 @@ describe('FormControlMixin', () => {
 
     const elElem = await fixture(html`
       <${tag}>
-        <label slot="help-text">We will not send you any spam</label>
+        <div slot="help-text">We will not send you any spam</div>
         ${inputSlot}
       </${tag}>`);
     expect(elElem.helpText).to.equal('We will not send you any spam', 'as an element');
@@ -77,12 +87,22 @@ describe('FormControlMixin', () => {
   it('can have a help-text that supports inner html', async () => {
     const el = await fixture(html`
       <${tag}>
-        <label slot="help-text">We will not send you any spam</label>
+        <div slot="help-text">We will not send you any <span>spam</span></div>
         ${inputSlot}
       </${tag}>`);
     expect(el.helpText).to.equal('We will not send you any spam');
   });
 
+  it('only takes help-text of direct child', async () => {
+    const el = await fixture(html`
+      <${tag}>
+        <${tag} help-text="We will not send you any spam">
+          ${inputSlot}
+        </${tag}>
+      </${tag}>`);
+    expect(el.helpText).to.equal(undefined);
+  });
+
   it('does not duplicate aria-describedby and aria-labelledby ids', async () => {
     const lionField = await fixture(`
       <${elem} help-text="This element will be disconnected/reconnected">${inputSlot}</${elem}>