input-duration 2.1.1 → 2.2.1

package/README.md

@@ -52,13 +52,12 @@
 <div>
   </div>
     <div align="center">
-    <a href="https://6mxpg2.csb.app/" target="_blank">Demo</a>
-    ·
-  <a href="https://stephanluis.github.io/input-duration/" target="_blank">Docs</a>
-  ·
   <a href="https://codesandbox.io/s/peaceful-waterfall-6mxpg2?file=/index.html" target="_blank">
   Fiddle
-</a>
+</a> ·
+      <a href="https://6mxpg2.csb.app/" target="_blank">Demo</a>
+    ·
+  <a href="https://stephanluis.github.io/input-duration/" target="_blank">Docs</a>
   ·
     <a href="https://github.com/StephanLuis/input-duration/issues">Bugs</a>
     ·
@@ -115,6 +114,7 @@ Time inputs <input type='time'> are updated by browsers in unwanted ways!   Safa
 <img src="readme/codeDrawing.png" alt="drawing" width="60%"/>
 
 <!-- [![HTML Screen Shot][html-screenshot]](https://example.com) -->
+*note input-duration needs closing tag!
 
 <h3> Bob is rescued by INPUT-DURATION! </h3>
 
@@ -222,7 +222,7 @@ import chronlyhms from 'https://cdn.jsdelivr.net/npm/input-duration/+esm'
 <!-- USAGE EXAMPLES -->
 ## Usage
 
-input-duration requires a <input-duration> element .  There's no more HTML than that.  
+input-duration requires a `<input-duration>` element .  There's no more HTML than that, but don't forget the closing tag.  Native Input elements don't have them!
 ```sh
 
 <input-duration id='bob'></input-duration>

package/index.js

@@ -141,6 +141,7 @@ class InputDuration extends HTMLElement {
         this.addNumericInput();
         this.addClicksToActivate();
         this.nonNumericBugInHTML();
+        this.removeEprop();
 
     }
 
@@ -574,7 +575,21 @@ class InputDuration extends HTMLElement {
             }));
     }
 
+    /**
+     * Stop event propigation from the timeCase up through the DOM so when keys 
+     * are being used they don't affect other controls (like volume on plyr)
+     * @method
+     */
+
+    removeEprop()   {
+        
+        document.querySelector('input-duration').shadowRoot.querySelector('.timeCase')
+        .addEventListener('keydown', function (event) { event.stopPropagation();}); 
 
+    }
+
+
+    
     // formatting and behaviour options
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "input-duration",
-  "version": "2.1.1",
+  "version": "2.2.1",
   "author": "Stephan Luis <stephan@learnsense.org>",
   "description": "This is the 'Input-Duration'! It is a webcomponent that provides an hour, minute, second, and millisecond control for HTML5.",
   "browser": "indexjs",