fix(select): Only add line ripple listeners when line ripple is prese…

…nt (#3470)
material-components · Aug 29, 2018 · 453b5c5 · 453b5c5
1 parent b10095f
commit 453b5c5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/packages/mdc-select/index.js b/packages/mdc-select/index.js
@@ -176,9 +176,12 @@ class MDCSelect extends MDCComponent {
     this.nativeControl_.addEventListener('change', this.handleChange_);
     this.nativeControl_.addEventListener('focus', this.handleFocus_);
     this.nativeControl_.addEventListener('blur', this.handleBlur_);
-    ['mousedown', 'touchstart'].forEach((evtType) => {
-      this.nativeControl_.addEventListener(evtType, this.handleClick_);
-    });
+
+    if (this.lineRipple_) {
+      ['mousedown', 'touchstart'].forEach((evtType) => {
+        this.nativeControl_.addEventListener(evtType, this.handleClick_);
+      });
+    }
 
     // Initially sync floating label
     this.foundation_.handleChange();

diff --git a/test/unit/mdc-select/mdc-select.test.js b/test/unit/mdc-select/mdc-select.test.js
@@ -488,6 +488,19 @@ test('mousedown on the select sets the line ripple origin', () => {
   td.verify(bottomLine.setRippleCenter(200), {times: 1});
 });
 
+test('mousedown on the select does nothing if the it does not have a lineRipple', () => {
+  const hasOutline = true;
+  const {bottomLine, fixture} = setupTest(hasOutline);
+  const event = document.createEvent('MouseEvent');
+  const clientX = 200;
+  const clientY = 200;
+  // IE11 mousedown event.
+  event.initMouseEvent('mousedown', true, true, window, 0, 0, 0, clientX, clientY, false, false, false, false, 0, null);
+  fixture.querySelector('select').dispatchEvent(event);
+
+  td.verify(bottomLine.setRippleCenter(200), {times: 0});
+});
+
 test('#destroy removes the mousedown listener', () => {
   const {bottomLine, component, fixture} = setupTest();
   const event = document.createEvent('MouseEvent');