fix: slider overlaying in warn and error icon (#16240)

carbon-design-system · Apr 24, 2024 · 0a342c7 · 0a342c7
1 parent 32271bf
commit 0a342c7
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/packages/react/src/components/Slider/Slider.tsx b/packages/react/src/components/Slider/Slider.tsx
@@ -964,6 +964,7 @@ class Slider extends PureComponent<SliderProps> {
   };
 
   processNewInputValue = (input: HTMLInputElement) => {
+    this.setState({ correctedValue: null, correctedPosition: null });
     const targetValue = Number.parseFloat(input.value);
     const validity = !isNaN(targetValue);
 
@@ -1343,14 +1344,16 @@ class Slider extends PureComponent<SliderProps> {
     } = this.state;
 
     const showWarning =
-      (!readOnly && warn && isValid) ||
+      (!readOnly && warn) ||
       (typeof correctedValue !== null &&
-        correctedPosition === HandlePosition.LOWER);
+        correctedPosition === HandlePosition.LOWER &&
+        isValid);
     const showWarningUpper =
-      (!readOnly && warn && (twoHandles ? isValidUpper : isValid)) ||
+      (!readOnly && warn) ||
       (typeof correctedValue !== null &&
         correctedPosition ===
-          (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER));
+          (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER) &&
+        (twoHandles ? isValidUpper : isValid));
 
     return (
       <PrefixContext.Consumer>