From d6c8afb9bc8593862d1e115df0a0024ebbbc9626 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 22 Jul 2020 07:12:08 -0400
Subject: [PATCH] Fix range tooltip on iOS; closes #110

---
 src/components/range/range.scss |  2 +-
 src/components/range/range.tsx  | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/range/range.scss b/src/components/range/range.scss
index 5822ab520..512a7a09f 100644
--- a/src/components/range/range.scss
+++ b/src/components/range/range.scss
@@ -147,7 +147,7 @@
   }
 }
 
-.range--focused .range__tooltip {
+.range--tooltip-visible .range__tooltip {
   opacity: 1;
 }
 
diff --git a/src/components/range/range.tsx b/src/components/range/range.tsx
index d5a8fd823..ad6841afd 100644
--- a/src/components/range/range.tsx
+++ b/src/components/range/range.tsx
@@ -21,6 +21,7 @@ export class Range {
   resizeObserver: any;
 
   @State() hasFocus = false;
+  @State() hasTooltip = false;
 
   /** The input's name attribute. */
   @Prop() name = '';
@@ -59,6 +60,7 @@ export class Range {
     this.handleInput = this.handleInput.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
+    this.handleTouchStart = this.handleTouchStart.bind(this);
   }
 
   componentWillLoad() {
@@ -93,16 +95,22 @@ export class Range {
 
   handleBlur() {
     this.hasFocus = false;
+    this.hasTooltip = false;
     this.slBlur.emit();
     this.resizeObserver.unobserve(this.input);
   }
 
   handleFocus() {
     this.hasFocus = true;
+    this.hasTooltip = true;
     this.slFocus.emit();
     this.resizeObserver.observe(this.input);
   }
 
+  handleTouchStart() {
+    this.setFocus();
+  }
+
   syncTooltip() {
     if (this.tooltip !== 'none') {
       const percent = Math.max(0, (this.value - this.min) / (this.max - this.min));
@@ -125,9 +133,11 @@ export class Range {
           // States
           'range--disabled': this.disabled,
           'range--focused': this.hasFocus,
+          'range--tooltip-visible': this.hasTooltip,
           'range--tooltip-top': this.tooltip === 'top',
           'range--tooltip-bottom': this.tooltip === 'bottom'
         }}
+        onTouchStart={this.handleTouchStart}
       >
         <input
           part="input"