From b21509db7a74fc49960cb9dffb63693be5db9bb2 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Mon, 28 Oct 2019 16:00:42 -0600
Subject: [PATCH] [EuiColorStops] ignore empty values when getting range max
 and min (#2496)

* ignore empty values when getting range max and min

* update change log with PR URL

* check for empty string instead of isNaN

* use original check for NaN instead of empty string
---
 CHANGELOG.md                                            | 1 +
 src/components/color_picker/color_stops/color_stops.tsx | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8c72ff00ac2..e6dfc042dd5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Added new `euiTreeView` component for rendering recursive objects such as folder structures. ([#2409](https://github.com/elastic/eui/pull/2409))
 - Added `euiXScrollWithShadows()` mixin and `.eui-xScrollWithShadows` utility class ([#2458](https://github.com/elastic/eui/pull/2458))
+- Fixed `EuiColorStops` where empty string values would cause range min or max to be NaN ([#2496](https://github.com/elastic/eui/pull/2496))
 
 **Bug fixes**
 
diff --git a/src/components/color_picker/color_stops/color_stops.tsx b/src/components/color_picker/color_stops/color_stops.tsx
index ce7479ea097..e7b498c2e9f 100644
--- a/src/components/color_picker/color_stops/color_stops.tsx
+++ b/src/components/color_picker/color_stops/color_stops.tsx
@@ -62,9 +62,13 @@ function sortStops(colorStops: ColorStop[]) {
     .sort((a, b) => a.stop - b.stop);
 }
 
+function getValidStops(colorStops: ColorStop[]) {
+  return colorStops.map(el => el.stop).filter(stop => !isNaN(stop));
+}
+
 function getRangeMin(colorStops: ColorStop[], min?: number) {
   const rangeMin = min || DEFAULT_MIN;
-  const stops = colorStops.map(el => el.stop);
+  const stops = getValidStops(colorStops);
   const first = Math.min.apply(Math, stops); // https://johnresig.com/blog/fast-javascript-maxmin/
 
   if (first < rangeMin) {
@@ -78,7 +82,7 @@ function getRangeMin(colorStops: ColorStop[], min?: number) {
 }
 function getRangeMax(colorStops: ColorStop[], max?: number) {
   const rangeMax = max || DEFAULT_MAX;
-  const stops = colorStops.map(el => el.stop);
+  const stops = getValidStops(colorStops);
   const last = Math.max.apply(Math, stops); // https://johnresig.com/blog/fast-javascript-maxmin/
 
   if (last > rangeMax) {