fix(slider): Visual bug when slider value is displayed as "-0"

Co-authored-by: Abhinay Omkar <abhiomkar@gmail.com>
material-components · Jan 24, 2020 · 3fc3ab5 · 3fc3ab5
1 parent 7f5e0c2
commit 3fc3ab5
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/packages/mdc-slider/foundation.ts b/packages/mdc-slider/foundation.ts
@@ -467,6 +467,7 @@ export class MDCSliderFoundation extends MDCFoundation<MDCSliderAdapter> {
     } else if (value > max) {
       value = max;
     }
+    value = value || 0; // coerce -0 to 0
     this.value_ = value;
     this.adapter_.setAttribute(strings.ARIA_VALUENOW, String(this.value_));
     this.updateUIForCurrentValue_();

diff --git a/packages/mdc-slider/test/foundation-pointer-events.test.ts b/packages/mdc-slider/test/foundation-pointer-events.test.ts
@@ -390,5 +390,31 @@ describe('MDCSliderFoundation - pointer events', () => {
 
       expect(mockAdapter.notifyChange).toHaveBeenCalled();
     });
+
+    it(`on body ${
+           moveEvt} discrete slider avoids "-0" pin value marker`,
+       () => {
+         const {foundation, mockAdapter, rootHandlers, bodyHandlers} =
+             setupTest();
+
+         mockAdapter.computeBoundingRect.and.returnValue({left: 0, width: 100});
+         mockAdapter.hasClass.withArgs(cssClasses.IS_DISCRETE)
+             .and.returnValue(true);
+         foundation.init();
+         foundation.setMin(-50);
+         foundation.setMax(50);
+         jasmine.clock().tick(1);
+
+         // Simulate barely moving the pointer to the left of "0"
+         rootHandlers[downEvt](clientXObj(50));
+         bodyHandlers[moveEvt]({
+           preventDefault: () => {},
+           ...clientXObj(49.9),
+         });
+         jasmine.clock().tick(1);
+
+         const stringValue = mockAdapter.setMarkerValue.calls.mostRecent().args[0].toLocaleString();
+         expect(stringValue).toEqual('0');
+       });
   }
 });