From 6ad0c254b5d118741281230be3ed82d7706b02a6 Mon Sep 17 00:00:00 2001
From: Victor Cerutti <victor.cerutti@gmail.com>
Date: Tue, 6 Feb 2018 07:31:00 +0100
Subject: [PATCH] Fix resizeObserver loop #12192 (#867)

When the slider width is updated, resizeObserver prevent for firing the function another time.
Exemple: https://jsfiddle.net/ba1ad26e/11/
Compete doc: https://wicg.github.io/ResizeObserver/#html-event-loop
Solution: Observe the width change of the card instead of the slider. If the state value is hidden/displayed, it won't change again the slider width and so it will prevent the msg in the log
Drawback: the function cannot use the width sent by the resizeObserver anymore as it's no longer the slider width but the card width
---
 src/state-summary/state-card-input_number.html | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/state-summary/state-card-input_number.html b/src/state-summary/state-card-input_number.html
index dbdcb8941f..23ee342992 100644
--- a/src/state-summary/state-card-input_number.html
+++ b/src/state-summary/state-card-input_number.html
@@ -38,7 +38,7 @@
       }
     </style>
 
-    <div class='horizontal justified layout'>
+    <div class='horizontal justified layout' id='input_number_card'>
       <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
         <paper-slider min='[[min]]' max='[[max]]' value='{{value}}' step='[[step]]' hidden='[[hiddenslider]]' pin
           on-change='selectedValueChanged' on-tap='stopPropagation' id='slider'>
@@ -73,11 +73,11 @@ class StateCardInputNumber extends Polymer.mixinBehaviors([
     super.ready();
     if (typeof ResizeObserver === 'function') {
       const ro = new ResizeObserver((entries) => {
-        entries.forEach((entry) => {
-          this.hiddenState(entry.contentRect.width);
+        entries.forEach(() => {
+          this.hiddenState();
         });
       });
-      ro.observe(this.$.slider);
+      ro.observe(this.$.input_number_card);
     } else {
       this.addEventListener('iron-resize', this.hiddenState);
     }
@@ -126,11 +126,9 @@ class StateCardInputNumber extends Polymer.mixinBehaviors([
     };
   }
 
-  hiddenState(sliderwidth) {
+  hiddenState() {
     if (this.mode !== 'slider') return;
-    if (isNaN(sliderwidth)) {
-      sliderwidth = this.$.slider.offsetWidth;
-    }
+    const sliderwidth = this.$.slider.offsetWidth;
     if (sliderwidth < 100) {
       this.$.sliderstate.hidden = true;
     } else if (sliderwidth >= 145) {